Question

我已经成功地从API获取数据。 JSON格式的数据转换也可以工作，但是我无法将其集成到“ componentDidMount”以使用转换后的JSON格式设置状态。我console.log(this.state.races)进入不确定状态。

我也收到此错误消息：

无法在已卸载的组件上调用setState（或forceUpdate）。

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

console.log（数据映射）打印的内容：

{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));

或者您可以通过console.log方法render来设置状态。

Answer 2

引自官方文档：

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

重要！

这使得在调用setState（）之后立即读取this.state是潜在的陷阱。

因此，您不会在setState之后立即获得状态。您有两种解决方法。

1）您应该签入componentDidUpdate钩子。

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

您可以看到here可以正常使用。

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

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

ReactJs：提取，使用函数转换数据，然后设置setState

2 个答案: