ReactJs:获取，使用函数转换数据，然后设置状态

Question

我已经成功地从API获取数据。JSON 格式的数据转换也可以工作，但我在将其集成到"componentDidMount"以使用转换后的 JSON 格式设置状态时遇到问题。当我console.log(this.state.races)时，我得到一个未定义的状态。

我也收到此错误消息：

无法在未挂载的组件上调用 setState(或强制更新(。

class Races extends Component {
constructor(props) {
super(props);
this.state = {
races: []};
this.processResults = this.processResults.bind(this);  
}
componentDidMount(){
fetch(RACE_SERVICE_URL) 
.then(results => results.json()) 
.then(this.processResults)
}
processResults(data) {
const raceId_arr = data.map(d => d.raceId);
const season_arr = data.map(d => d.season);
const raceName_arr = data.map(d => d.raceName);
const url_arr = data.map(d => d.url);
const data_mapped = {'raceId': raceId_arr, 'season': season_arr, 'raceName': raceName_arr, 'url': url_arr};
this.setState({races:data_mapped});
console.log(data_mapped);
console.log(this.state.races);
}

render() {
const title = 'Race Tracks';
return (
<div>
<h2>{title}</h2>
<RacesViz data= {this.state.races.raceId} />
</div>
);
}
}
export default Races;

我也尝试过：

.then(data => this.processResults(data))

控制台.log(data_mapped(打印的内容：

{raceId:[1, 2, 3]
raceName:["AGP", "BGP", "CGP"]
season: [2018, 2018, 2018]
url: ["http://en.wikipedia.org/wiki/AGP", "http://en.wikipedia.org/wiki/BGP", "http://en.wikipedia.org/wiki/CGP"]}

Answer 1

setState是异步的，因此您无法像以前那样立即获得console.log结果。请改用回调函数：

this.setState({races:data_mapped}, () => console.log(this.state.races));

或者，您可以在render方法中console.log您的状态。

Answer 2

引用官方文档：

将 setState(( 视为一个请求，而不是更新组件的即时命令。为了获得更好的感知性能，React 可能会延迟它，然后在一次传递中更新多个组件。React 不保证立即应用状态更改。

重要！

这使得在调用 setState(( 后立即读取this.state成为一个潜在的陷阱。

所以你不会在setState后立即得到状态.您有两种方法可以解决它。

1(您应该签入componentDidUpdate钩子。

componentDidUpdate(prevProps, prevState) {
console.log(this.state.races);//your data updated here.
}

您可以在此处看到以正确使用。

2(或者你在setState中使用callback，就像这样setState(updater, callback)：

this.setState({races:data_mapped}, () => {
console.log(this.state.races)//your data updated here.
})