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

回答

相關問題