Javascript 为什么ReactJS中的状态变量没有呈现，为什么它没有定义？

初学者的反应和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;

import React，{Component}来自'React'；
导入“/App.css”；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.state={
答复：[]
}; 
this.getData=this.getData.bind（this）；
}
componentDidMount（）{
这是getData（）；
}
getData=（）=>{
取（'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（）{
返回(
展示
{this.state.apiResponse}
这行吗？
);
}
}
导出默认应用程序；

---

在fetch之后运行的第一个console.log返回相应的JSON对象，而在fetch之后运行的下一个console.log返回一个未定义的对象，

{this.state.apiResponse}

不呈现任何内容。

您正在使用

然后

方法处理json对象，但是您没有返回某些内容以便下一个

然后

作为输入

如果你删除这行

.then(console.log)

---

然后它应该可以工作。

您正在使用

then

方法处理json对象，但随后您没有返回某些内容，以便下一个

then

作为输入

如果你删除这行

.then(console.log)

---

然后它就应该工作了。

无论何时使用.then（）解析承诺，您都希望将解析传递给下一个回调。

。然后（console.log）

打破了这一点。您在下次回调中没有结果。

---

阅读更多相关信息。

每当您使用.then（）解析承诺时，您希望将解析传递给下一个回调。

。然后（console.log）

打破了这一点。您在下次回调中没有结果。

---

请阅读更多相关信息。

问题在于，当您作为回调传递到

然后
控制台.log
函数，然后继续
然后
链接并期望访问结果，顺便说一句，您应该直接调用
then
链，在调用
console.log
之前，在该链中设置
状态
，然后在该回调中返回
结果
，如下所示

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

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

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

问题在于，当您将回调作为回调传递给
然后
控制台日志
函数，然后继续
然后
链接并期望访问结果，顺便说一句，您应该直接调用
then
链，在调用
console.log
之前，在该链中设置
状态
，然后在该回调中返回
结果
，如下所示

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

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

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

这是你的链接中的问题，这里有一个答案：

然后方法返回一个允许方法链接的承诺

如果作为处理程序传递给的函数返回一个承诺，则
同等承诺将在随后的
方法链-MDN

。。。
.then（console.log）//这里没有公开任何响应
...
}

补救办法可以是：

。。。
getData=（）=>{
取（'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））；
}
...
这是你的链接中的问题，这里有一个答案：

然后方法返回一个允许方法链接的承诺

如果作为处理程序传递给的函数返回一个承诺，则
同等承诺将在随后的
方法链-MDN

。。。
.then（console.log）//这里没有公开任何响应
...
}

补救办法可以是：

。。。
getData=（）=>{
取（'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））；
}
...
从“React”导入React，{Component}；
导入“/App.css”；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.state={
答复：[]
}; 
this.getData=this.getData.bind（this）；
}
componentDidMount（）{
这是getData（）；
}
getData=（）=>{
取（'http://localhost:5000')
.then（results=>results.json（））
.then（console.log）
.then（results=>this.setState（{apiResponse:results}））
.catch（err=>console.error（err））；
}
render（）{
返回(
展示
{this.state.apiResponse&&
this.state.apiResponse.recordSets.map（（singleRecord，index）=>
singleRecord.map（singleElement=>
{singleElement.FactoryName}}