在 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(){&nbsp;console.log(this.state);&nbsp;return <h1>Hello World</h1>}

Answer 2

你有一个额外.then的没有这个数据。下面的代码应该适合你。componentDidMount() {&nbsp; &nbsp; &nbsp; &nbsp; this.setState({ isLoading: true });&nbsp; &nbsp; &nbsp; &nbsp; let dataNames;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return fetch('url/someFile.csv')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .then(response => this.toCSV(response))&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .then(data => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(data)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.setState({ data: data, isLoading: false })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; }另外，console.log 不在合适的地方，如果你想记录东西来检查它，它应该放在 setState 执行之后。