在 react.js 中使用 promise 获取数据。状态为空。为什么？

Question

从 CSV 文件获取数据时遇到问题。这是我的代码：constructor(props) {        super(props);        this.state = {            data: [],            isLoading: false,        };        console.log(this.state.data) // Data is gone =(    }toCSV(response){        let reader = response.body.getReader();        let decoder = new TextDecoder('utf-8');        return reader.read().then(function (result) {            let data = decoder.decode(result.value);            let results = Papa.parse(data);            let rows = results.data;            return rows;        });    }componentDidMount() {        this.setState({ isLoading: true });        let dataNames;            return fetch('url/someFile.csv')            .then(response => this.toCSV(response))            .then(data => console.log(data)) // Data is here            .then(data => this.setState(                { data: data, isLoading: false }            ));    }fetch 中的输出：(3) […]0: Array(4) [ "abc", " 1", "aha", … ]1: Array(4) [ "def", "2", "test", … ]2: Array(4) [ "ghi", "3", "something", … ]length: 6构造函数中的输出：[]length: 0我不明白为什么this.state是空的。我知道 promise 是一个异步函数，但我认为this.setState({ data: data, isLoading: false })会将数据设置到this.state.data中，然后实现 promise。我在这里找到了这个解决方案，但我无法解决这个问题：React: import csv file and parse我也尝试用JSON 文件来做，因为我认为问题出在我的toCSV 函数上，但结果是一样的....fetchJSON() {        fetch(`someJSONfile.json`)            .then(response => response.json())            .then(response => console.log(response))            .then(data =>                this.setState({                    data: data,                    isLoading: false,                })            )            .catch(error => console.log(error));    }我希望你们中的一个人可能有一个想法。谢谢你的时间 ：）

Answer 1

构造函数将只运行一次。使用 React.Component，render() 方法将在状态更改时重新运行，检查它：

render(){

 console.log(this.state);

 return <h1>Hello World</h1>

}

Answer 2

你有一个额外.then的没有这个数据。下面的代码应该适合你。

componentDidMount() {

        this.setState({ isLoading: true });

        let dataNames;

            return fetch('url/someFile.csv')

            .then(response => this.toCSV(response))

            .then(data => {

                console.log(data)

                this.setState({ data: data, isLoading: false })

            })

    }

另外，console.log 不在合适的地方，如果你想记录东西来检查它，它应该放在 setState 执行之后。