Javascript 在axios调用期间，对装载状态不正确作出反应

基本上，我正在制作一个基本的react应用程序，从数据库中获取一些数据，我被困在基本设置上

我的目的是让我的状态包含来自查询数据库的服务器的响应

我的回答是100%正常工作，并按预期从axios调用发送回数据，但状态从未得到更新

编辑：我正在尝试将电影传递到一个名为MovieList的组件，我也提供了相应的代码

App.jsx

import React from 'react';
import axios from 'axios';

import MovieList from './MovieList.jsx';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {allMovies: []};
   
  }

  componentDidMount() {
    var that = this;
    axios.get('http://localhost:3000/api/movies')
      .then( res => {
        that.setState({allMovies: res.data});
      })
      .catch( err => {
        console.log(`Err @ [ App.jsx - componentDidMount ] ::: ${err}`);
      });
  }

  render() {
    return (
      <div>
        <h1>Hello World!</h1>
        <MovieList movies={this.state.allMovies} />
      </div>
    )
  }
}

从“React”导入React；
从“axios”导入axios；
从“/MovieList.jsx”导入MovieList；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={allMovies:[]}；
}
componentDidMount（）{
var=这个；
axios.get（）http://localhost:3000/api/movies')
。然后（res=>{
setState（{allMovies:res.data}）；
})
.catch（错误=>{
log（`Err@[App.jsx-componentDidMount]：：${Err}`）；
});
}
render（）{
返回(
你好，世界！
)
}
}

MovieList.jsx

     import React from 'react';

class MovieList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
        console.log(this.props); //EMPTY OBJECT MOVIES DIDN'T GET INTO PROPS
    }

    render() {
        return (
            <div>
                <h1>Test</h1>
            </div>
        )
    }
}

export default MovieList;

从“React”导入React；
类MovieList扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={}；
console.log（this.props）；//空对象电影没有进入道具
}
render（）{
返回(
试验
)
}
}
导出默认电影列表；

注意：我还记录了挂载的道具，并试图渲染它们，但它们是空的

基本上，如果我尝试传递this.state.allMovies或console.log，它总是最初的空数组

---

也许我不明白如何异步设置状态？我在上一个学校项目中采用了类似的方法，似乎效果很好。

您不必等待axios承诺的解决，因此您只需记录组件安装时的状态。使用以下选项之一记录更新的反应状态

使用

componentdiddupdate

记录更新状态

componentDidMount() {
  console.log(this.state);
}

使用

setState

回调函数记录状态

componentDidMount() {
  var that = this;
  axios.get('http://localhost:3000/api/movies')
    .then( res => {
      console.log(res.data);
      that.setState(
        { allMovies: [res.data] },
        () => console.log(this.state), // <-- setState callback function
      );
    })
    .catch( err => {
      console.log(`Err @ [ App.jsx - componentDidMount ] ::: ${err}`);
    });
}

componentDidMount（）{
var=这个；
axios.get（）http://localhost:3000/api/movies')
。然后（res=>{
console.log（res.data）；
那是一个州(
{allMovies:[res.data]}，
（）=>console.log（this.state），//{
log（`Err@[App.jsx-componentDidMount]：：${Err}`）；
});
}

您永远不会在构造函数中看到它，因为当您的组件被实例化时，它是用一个空数组来完成的

但是，如果在

componentdiddupdate

或

render

中执行

console.log（this.props）

，您将看到它

这是因为当安装

App

时，在电影从服务器返回（并且您更新

App

的状态）之后，您的组件会将

[]

的电影道具传递给

MovieList

，

App

将再次渲染并传递从服务器返回的数组，导致您的

MovieList

组件再次渲染。不会调用它的

构造函数

，因为它已经实例化，但

MovieList

将再次调用

componentdiddupdate

和

render

class MovieList扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={}；
}
render（）{
console.log（this.props）；//您将看到此日志记录了两次—一次使用空的电影数组，另一次使用从服务器返回的电影。
返回(
试验
)
}
}

@chrisalopez137那么问题出在电影列表中了吗？它不是“看”作为道具传递给它的更新状态？你能尝试创建一个运行的codesandbox来复制问题并在此处共享吗？@chrisalopez1337类似的情况，构造函数只运行一次，因此在初始渲染时它会接收传递给它的空数组。此外，在构造函数中，

this.props

实际上不是尚未定义，如果要记录收到的道具，请使用传递给构造函数的

props

参数，即

console.log（道具）

。在子组件中使用生命周期函数，如

componentdiddupdate

，在道具更新时记录道具并重新提交组件。@chrisalopez1337构造函数应该是一个纯函数，没有副作用……在安装组件时使用

componentdiddimount

发出任何副作用，如日志记录。@chrisalopez1337之所以抛出，是因为在初始渲染时，

this.props.movies[0]

未定义。您可以使用可选链接

this.props.movies[0]？.title

来防止空值/未定义值。

movies

是一个数组，因此通常需要映射结果，即

this.props.movies.map（movie=>（{movie.title}））

，如果要显示“加载”状态，则可以有条件地呈现它，如

this.props.movies.length？this.props.movies.map（movie=>（{movie.title}））：“…正在加载电影”

@chrisalopez1337无需担心。如果问题得到解决且解释有帮助，请接受回答并投票。干杯。在您的电影组件中，我想应该是

这个.props.Movies

。