axios.get에서 데이터를 표시 할 수 없습니다.

Question

내 axios에 문제가 있습니다. json에서 데이터를 읽고 테이블 형식으로 itg를 표시하려고합니다. 이것은 내 코드

constructor(props){ 
     super(props) 
     data: [] 
    } 

componentWillMount(){ 
    axios.get('http://localhost:3030/Personel') 
    .then((response) => { 
     console.log(response.data); 
     this.setState({ 
      datas: response.data 
     }) 
    }) 
    .catch(function (error) { 
     console.log(error); 
    }); 
    } 

    render(){ 
    console.log("lagi ngerender nih") 
     return(
     <div> 
     <Table> 
      <TableHeader > 
      <TableRow> 
       <TableHeaderColumn> 
        <div> 
        <IconPerson /> <p> Data Personil </p> 
        </div> 
       </TableHeaderColumn> 
      </TableRow> 
       <TableRow> 
        <TableHeaderColumn>#</TableHeaderColumn> 
        <TableHeaderColumn>Nama Personil</TableHeaderColumn> 
        <TableHeaderColumn>Posisi</TableHeaderColumn> 
        <TableHeaderColumn>Jenis Kelamin</TableHeaderColumn> 
        <TableHeaderColumn>TB/BB</TableHeaderColumn> 
        <TableHeaderColumn>No.Handphone</TableHeaderColumn> 
       </TableRow> 
      </TableHeader> 
      <TableBody> 
       {this.state.datas.map((data, i) => (
        <TableRow key={i}> 
         <TableRowColumn>{data.id}</TableRowColumn> 
         <TableRowColumn>{data.fullName}</TableRowColumn> 
         <TableRowColumn>{data.posisi}</TableRowColumn> 
         <TableRowColumn>{data.isMale? "Laki-laki": "Perempuan"}</TableRowColumn> 
         <TableRowColumn>{data.height+ "cm/" + data.weight+ "kg"}</TableRowColumn> 
         <TableRowColumn>{data.phoneNo}</TableRowColumn> 
        </TableRow> 
       ))} 
      </TableBody> 
     </Table> 
     </div> 
     ) 
    } 
} 

이며,이 오류가있어 : "형식 오류를 : 널 (null)의 특성 'datas'을 읽을 수 없습니다"그건 ()를 Axios의 전에 발사되는 렌더링 보인다. 이 문제를 어떻게 해결할 수 있습니까? 감사의

Answer 1

오류는 "render()가 axios보다 먼저 발생했습니다"입니다. render 전에 componentWillMount이 (가) 해고됩니다.

여기에서 api 호출의 응답은 비동기 적으로 설정됩니다. 그것은 액시스 호출이 이루어 졌음을 의미하지만, 응답을 기다리지 않고 액시스 호출 후에 렌더가 호출됩니다. 즉

componentWillMount -> axios -> render -> response from axios 

응답을받은 후에 만 ​​데이터를 렌더링해야합니다. Axios의 호출이 비동기이기 때문에이 완료되지 않을 수 this-

Can I call APIs in componentWillMount in React?

Answer 2

을 확인하고 방법 화재 렌더링하기 전에 응답 상태를 설정합니다. 따라서 렌더링 메소드에서 null을 확인하고 사용 가능한 유효한 데이터가있는 경우에만 테이블 행을 렌더링해야합니다. 이 렌더링 방법

constructore(props){ 
    super(props); 
    this.state = {datas:null}; 
} 

Answer 3

을에 액세스 할 때 null되지 않도록

당신은 또한

{this.state.datas && this.state.datas.map . . .} 

같은 수표를 사용할 수 있습니다

, 당신은 생성자에서 state를 초기화해야 axios 부분이 아닙니다. 당신은 잘못된 배열을 반복하고있다. '데이터'는 존재하지 않으며 '데이터'는 존재하지 않습니다. 또한 데이터가 아닌 맵의 첫 번째 인수에 다른 이름을 찾으십시오.

this.state.datas.map((data, i)) 

에

this.state.data.map((d, i)) 

또한 당신은 당신이 서버에서 '데이터'를받은 후 일부를 변경해야합니다.

this.setState({ 
    datas: response.data 
}) 

'데이터'배열을 '데이터'라고 부르지 않습니다.

또한 FYI. 데이터는 복수형이며, 데이텀은 단수입니다.

희망이 도움이됩니다. :)