为什么我在 ReactJS 中的状态变量没有渲染，为什么它是未定义的？

Question

React 和 JavaScript 的初学者，如果这是一个简单的修复，请见谅。

我正在从服务器获取数据并打算解析响应并将响应的元素存储在作为状态变量的数组中，因为我想使用状态的变化来相应地更新页面。

我遇到的问题是，在使用 fetch() 时，我能够从服务器检索数据，但显然我无法正确使用 setState() 将数据分配给变量。我读过 setState() 是异步的，因此您的状态变量可能不会立即更新，在这种情况下，我想知道我是否可以在状态变量（数组）更新时呈现应用程序。

下面是我的代码：

import React, { Component } from 'react';
import './App.css';

class App extends Component{
  constructor(props)  {
    super(props);
    this.state = { 
      apiResponse: []
    }; 
    this.getData = this.getData.bind(this);
  }
  componentDidMount() {
    this.getData();
  }

  getData = () => {
    fetch('http://localhost:5000')
      .then(results => results.json())
      .then(console.log)
      .then(results => this.setState({apiResponse: results}, () => {
        console.log('data in state', this.state.apiResponse)
      }))
      .catch(err => console.error(err));
  }
  render()  {
    return (
      <div className="App">
        <h1>Display</h1>
        <h1>{this.state.apiResponse}</h1>
        <h1>Does this work?</h1>
      </div>
    );
  }
}

export default App;

我在 fetch 之后运行的第一个 console.log 返回了适当的 JSON 对象，但是之后的下一个 console.log 返回一个未定义的，{this.state.apiResponse} 不呈现任何内容。

Answer 1

您正在使用 then 方法处理 json 对象，但随后您没有返回任何内容以便让下一个 then 作为输入。

如果您删除此行

.then(console.log)

那么它应该可以工作。

Answer 2

问题是当你作为回调传递给 then consol.log 函数并且在你继续 then 链接并期望能够访问结果之后，你应该做的是直接调用then 链，您在调用 console.log 之前设置 state，然后在回调中返回 results，如下所示

fetch('http://localhost:5000')
  .then(results => results.json()) 
  .then(results => {
      this.setState({apiResponse: results}, () => {
          console.log('data in state', this.state.apiResponse)
      });
      return result;
   })
   .then(console.log);

或者只是用这样的普通函数替换它

fetch('http://localhost:5000')
  .then(results => results.json())
  .then((results) => {
      console.log(results);
      return results;
  })
  .then(results => {
      this.setState({apiResponse: results}, () => {
          console.log('data in state', this.state.apiResponse)
      });
      return result;
   });

Answer 3

每当您使用 .then() 解析 Promise 时，您都希望将解析传递给下一个回调。 .then(console.log) 打破了这一点。您在下一次回调中没有结果。 阅读更多关于 here 的信息。

Answer 4

这是你的Chaining的问题，这是一个答案：

then 方法返回一个允许方法链接的 Promise。

如果函数作为处理程序传递给 then 返回一个 Promise，一个 等价的 Promise 将暴露给随后的 then 在 方法链。 -MDN

...
      .then(console.log) // here you're not exposing any response
...
  }

补救措施可能是：

...
getData = () => {
    fetch('http://localhost:5000')
      .then(results => {console.log(results); return results.json()})
      .then(results => this.setState({apiResponse: results}, () => {
        console.log('data in state', this.state.apiResponse)
      }))
      .catch(err => console.error(err));
  }
...

Answer 5

    import React, { Component } from 'react';
    import './App.css';
    
    class App extends Component{
      constructor(props)  {
        super(props);
        this.state = { 
          apiResponse: []
        }; 
        this.getData = this.getData.bind(this);
      }
      componentDidMount() {
        this.getData();
      }
    
      getData = () => {
        fetch('http://localhost:5000')
          .then(results => results.json())
          .then(console.log)
          .then(results => this.setState({apiResponse: results}))
          .catch(err => console.error(err));
      }
      render()  {
        return (
          <div className="App">
            <h1>Display</h1>
            <h1>{this.state.apiResponse && 
         this.state.apiResponse.recordSets.map((singleRecord, index)=>           
  singleRecord.map(singleElement => <span> 
              {singleElement.FactoryName}</span>))}</h1>
                <h1>Does this work?</h1>
              </div>
            );
      }
    }
    
    export default App;