React - render（）没有用axios调用setState

我想获取一个电影数组，然后它提取列表它更新状态和列表应该呈现，但问题是渲染方法从来没有从内部调用爱可信的回调，这里是低于React - render（）没有用axios调用setState

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

我的代码，你可以在爱可信回调见上面的代码中，在函数componentDidMount我的响应值设定的状态，但它不调用后呈现这样做，块确实执行得不错，因为我得到日志正确地看到下面的截图

我不明白为什么它不叫render()？我已经尝试了几个解决方案，但没有为我工作，如果我在视频阵列默认状态下硬编码它工作正常，请帮助，如果有人知道解决方案。

更新（添加MovieList代码）

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

感谢。

来源

2017-06-06 iphonic

你可以显示'MovieList'组件如何渲染电影数组？把'console.log（'render'）'放在渲染方法里，一旦你做了'setState'，它就会打印出来。 –

确保MovieList中的电影组件具有密钥，以便React可以知道要重新呈现的内容。（编辑感谢@azium） – Storm

@Storm MovieList应该没有密钥。里面的孩子可能会做，如果它是一个组件阵列 – azium

你得到的问题是在ListItem组件中。为了得到它的工作，你需要componentWillReceiveProps

工作在这种情况下，构建被称为只有一次 因为你的组件将不会更新。你需要使用函数componentWillReceiveProps，这个函数将在每次组件接收新数据时运行。

例子：

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

来源

2017-06-06 17:06:21

这有效，但我猜你有错字？它会是'componentWillReceiveProps'吗？ – iphonic

没错，只是改变了它。感谢您注意到 –

你在MovieList中加入componentWillReceiveProps吗？

来源

2017-06-06 16:57:37 vic

你应该考虑让你的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> 
    ); 
    } 
}

一般来说，你应该努力弱智化下你的组件只要有可能。

来源

2017-06-06 17:09:30

我不认为这是与React合作的好方法。您应该将代码分成小部件。（我谈论的是大项目） –

这就是在层次结构的基础上拥有小型无状态组件的要点。如果数据不能从父组件传播下来，你只想混淆状态 –

@StasParshin是的，它可以用作无状态组件，我只是试着让代码实例化，实际上它应该是两种类型的组件的混合物。 – iphonic

React - render（）没有用axios调用setState

回答

相关问题