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>
       )
   }
}

我收到了这个错误：＆＃34; TypeError：无法读取属性＆＃39;数据＆＃39; of null＆＃34; 似乎在axios之前触发了render（）。我该如何解决这个问题？感谢＆＃39; S

Answer 1

错误不是 - “在axios之前触发了render（）”。这是不可能的，因为在componentWillMount之前触发了render。

这里，来自api调用的响应是异步设置的。这意味着你的axios调用已经完成，但是没有等待响应，并且在axios调用之后调用render。即。

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

只有在收到回复后才需要呈现数据。检查一下 -

Can I call APIs in componentWillMount in React?

Answer 2

由于axios调用是异步的，因此可能无法完成并在render方法触发之前使用响应设置状态。因此，您必须在render方法中检查null，并仅在有可用数据时呈现表行。

你可以使用像

这样的支票

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

此外，您需要在构造函数中初始化state，以便在render方法中访问时不null

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

Answer 3

它不是axios的一部分。你正在迭代错误的数组。＆＃39; DATAS＆＃39;不存在，＆＃39;数据＆＃39;确实。还尝试为map的第一个参数而不是数据找到另一个名称。

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

到

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

此外，您需要在收到“数据”后更改该部分。从服务器。

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

你没有＆＃39;数据＆＃39;在您所在州的数组中，它被称为数据＆＃39;。

另外，仅供参考。数据是复数，Datum是单数。

希望这有帮助！：）

axios.get无法显示数据

3 个答案: