axios.get не может отображать данные

Question

У меня проблема с моими аксиосами. Я хочу прочитать данные из JSON и отобразить его в виде таблицы. Это мой код

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

и я получил эту ошибку: "TypeError: Невозможно прочитать свойство 'datas' из null" Кажется, что render() запускается перед axios. как я могу исправить эту проблему? Спасибо

Answer 1

Поскольку вызов axios является асинхронным, он может не завершиться и не установить состояние с ответом до запуска метода render. Таким образом, вам придется проверять наличие нуля в вашем методе рендеринга и отображать строки таблицы только тогда, когда доступны действительные данные.

Вы можете использовать чек, как

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

Кроме того, вам нужно будет инициализировать state в конструкторе, так что это не null при доступе в методе рендеринга

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

Answer 2

Это не аксиос часть. Вы перебираете неправильный массив. "данных" не существует, "данных" существует. Также попробуйте найти другое имя для первого аргумента карты вместо данных.

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

в

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

Также вам необходимо изменить деталь после получения ваших "данных" с сервера.

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

У вас нет массива данных в вашем состоянии, он называется "данные".

Также к вашему сведению. Данные множественного числа, данные единственного числа.

Надеюсь это поможет!:)

Answer 3

Ошибка не в том, что "render() запускается перед axios". Это невозможно как componentWillMount уволен раньше render,

Здесь ответ от вызова API устанавливается асинхронно. Это означает, что ваш вызов axios сделан, но нет никакого ожидания ответа, и render вызывается после вызова axios. т.е.

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

Вам необходимо отображать данные только после получения ответа. Проверь это-

Могу ли я вызвать API в componentWillMount в React?