정의되지 않음의 'Available'속성을 읽을 수 없습니다.

Question

React를 사용하여 API에서 JSON 객체를 구문 분석하려고하지만 하위 객체의 값을 가져 오는 방법을 알 수 없습니다. JSON의 루트에서 값을 가져 오는 것이 좋습니다. 내가 뭘 놓치고 있니?

JSON :

{ 
    "AllocDirStats": { 
    "Available": 511630798848, 
    "Device": "", 
    "InodesUsedPercent": 0, 
    "Mountpoint": "", 
    "Size": 536868810752, 
    "Used": 25238011904, 
    "UsedPercent": 4.700964443929746 
    }, 
    "CPU": [ 
    { 
     "CPU": "", 
     "Idle": 100, 
     "System": 0, 
     "Total": 0, 
     "User": 0 
    } 
    ], 
    "CPUTicksConsumed": 0, 
    "DiskStats": [ 
    { 
     "Available": 511630798848, 
     "Device": "C:", 
     "InodesUsedPercent": 0, 
     "Mountpoint": "C:", 
     "Size": 536868810752, 
     "Used": 25238011904, 
     "UsedPercent": 4.700964443929746 
    } 
    ], 
    "Memory": { 
    "Available": 30044225536, 
    "Free": 0, 
    "Total": 34359328768, 
    "Used": 4315103232 
    }, 
    "Timestamp": 1494912754632734000, 
    "Uptime": 1747472 
} 

JSX : 나는 예를 들어 {client.Uptime}-{clinet.Memory.Available}을 변경하는 경우에는 Uncaught TypeError: Cannot read property 'Available' of undefined

에서

var App = React.createClass({ 
    getInitialState: function() { 
     return { 
      client: [] 
     } 
    }, 

    componentDidMount: function() { 
     const makeRequest =() => axios.get("http://@Model.IP:4646/v1/client/stats").then(({ data }) => this.setState({ client: data })); 
     this.serverRequest = makeRequest(); 
     this.poll = setInterval(() => { 
      this.serverRequest = makeRequest(); 
     }, 60000) // Poll every 60 seconds 
    }, 

    componentWillUnmount: function() { 
     this.serverRequest.abort(); 
     clearInterval(this.poll) 
    }, 

    render: function() { 
     const { client } = this.state; 
     return (
      <div> 
       {client.Memory.Available} 
      </div> 
     ) 
    } 
}); 

ReactDOM.render(<App />, document.getElementById("root")); 

결과, 그것은 작동하고, 나는 1747472를 얻을.

Answer 1

render 함수는 API 호출이 성공하기 전에도 코드를 실행하는 것으로 보입니다. 따라서 코드는 빈 client 상태에 액세스하려고 시도합니다. 기본값은 []입니다. Memory은 이 []이므로 프로그램에서 Available을 찾을 수 없습니다.

제안 사항은 렌더링 기능에서 상태를 먼저 확인하는 것입니다. JS 유형 저글링이기 때문에, 당신은 다음과 같이 변경할 수 있습니다 : 굉장

var App = React.createClass({ 
 
    getInitialState: function() { 
 
     return { 
 
      client: null 
 
     } 
 
    }, 
 

 
    // the rest of the code is same 
 

 
    render: function() { 
 
     const { client } = this.state; 
 
     
 
     if(client === null) { 
 
      return (<div></div>); // or return null 
 
     } 
 
     
 
     return (
 
      <div> 
 
       {client.Memory.Available} 
 
      </div> 
 
     ) 
 
    } 
 
});