React - render() 没有用 axios 的 setState 调用

Question

我正在尝试获取电影数组，在获取列表后更新状态并且列表应该呈现，但问题是呈现方法从不从 axios 回调内部调用，下面是我的代码

export default class Movies extends Component {
    constructor(props){
      super(props);

      this.state={movies:[]};
    }

    componentDidMount(){

      axios.get('URL')
            .then(response => {
              this.setState({movies:response.data});
              console.log("Movies",this.state);// I get the values here see screenshot..

      });
  }

  render(){
    return(
      <div className="row">
        <div className="col-md-3">
          <MovieList movies={this.state.movies}/>
        </div>
        <div className="col-md-6">Movie Details</div>
      </div>
    );
  }
}

正如您在上面看到的代码，在 axios 回调函数 componentDidMount 中，我将响应值设置为状态，但它在完成后不调用渲染，块执行以及我正确获取日志请参见下面的屏幕截图

我不明白为什么它不调用 render()？我已经尝试了几个可用的解决方案，但 none 对我有用，如果我在默认状态下对视频数组进行硬编码，它就可以正常工作，如果有人知道解决方案，请提供帮助。

更新（添加电影列表代码）

class ListItem extends Component {
  render(){
    return(
      <li className="list-group-item">{this.props.moviename}</li>
    );
  }
}

export default class MoviesList extends Component {
  constructor(props) {
    super(props);
    console.log("Props",props);
    this.state={movies:props.movies};
  }

  renderList(){

    const items=this.state.movies.map((movie) => <ListItem moviename={movie.name} key={movie.name}/>);

    return items;
  }

  render(){
    return(
      <ul className="list-group">
        <li className="list-group-item"><h3>Movies</h3></li>
        {this.renderList()}
      </ul>
    );
  }
}

谢谢。

Answer 1

您是否在 MovieList 中添加了 componentWillReceiveProps？

Answer 2

您遇到的问题出在 ListItem 组件中。为了让它工作，你需要使用 componentWillReceiveProps

在这种情况下，构造被调用仅一次 因此，您的组件不会更新。您需要使用函数 componentWillReceiveProps ，此函数将运行每次组件接收新数据时。

示例：

componentwillreceiveprops(nextProps){
 this.setState({
   movies: nextProps.movies
})
}

Answer 3

您应该考虑让 MoviesList 无状态：

export default class MoviesList extends Component {

  constructor(props) {
    super(props);
    console.log("Props",props);
    //If your component won't alter movies list by itself - there's no point to manage its "state"
    //this.state={movies:props.movies};
  }

  renderList(){
    //Use props here instead
    const items=this.props.movies.map((movie) => <ListItem moviename={movie.name} key={movie.name}/>);
    return items;
  }

  render(){
    return(
      <ul className="list-group">
        <li className="list-group-item"><h3>Movies</h3></li>
        {this.renderList()}
      </ul>
    );
  }
}

一般来说，您应该尽可能简化您的组件。

React - render() 没有用 axios 的 setState 调用

React - render() not called with setState with axios

reactjs

axios