Question

一般来说是React和JS的新手，所以我为这个问题的简单性而道歉。

我正试图在React的状态下从我的API中存储一个孩子的名字，但我必须对JSON做错误，因为这个状态永远不会更新。

如果有人能够解释我做错了什么以及实现这个目标的最佳方法，我会非常感激。我的代码几乎反映了这一点，但我似乎无法弄清楚这里有什么不对。

https://www.robinwieruch.de/react-fetching-data/

import React, { Component } from 'react';

import Child from '../../Components/Child/Child'

class MyKids extends Component {
constructor(props) {
super(props);

this.state = {
  kidsName: '',
};
}
componentDidMount() {


fetch( 'http://localhost:3001/api/kids' )
.then( response => response.json())
.then(data => this.setState({kidsName: data[0].name}));

}

render() {

  const { kidsName } = this.state;
  return (
    <div className = 'col-sm-12'>
          <ul>
            <p>{ kidsName }</p>
            <Child
              kidsName={ kidsName }
              />
          </ul>
    </div>
);
}
}


export default MyKids;

JSON响应：

{"success":true,"data":[{"_id":"5b10610c827ea427b05581b9","name":"Nick"},{"_id":"5b115bc8827ea427b05581bb","name":"Trevor"}]}

Answer 1

在您的代码中，then中第二个fetch的处理应为：

componentDidMount() {
    fetch( 'http://localhost:3001/api/kids' )
        .then( response => response.json())
        .then(data => this.setState({kidsName: data.data[0].name}));
}

为清楚起见，您可以将其更改为：

componentDidMount() {
     fetch( 'http://localhost:3001/api/kids' )
         .then( response => response.json())
         .then(result => this.setState({kidsName: result.data[0].name}));
}

Answer 2

错误在于：

.then(data => this.setState({kidsName: data[0].name}));

这应该是

.then(res => this.setState({kidsName: res.data[0].name}));

相反，因为第一个代码段中的data形状为{ data: [...] }。

ReactJS - 以状态存储API数据

2 个答案: