React不會在道具變更時重新渲染

Question

我有點反應和對自己動手了。

這是我的渲染功能

    render() {
    const {repositories} = this.props

    return (
        <div className='mt4 bt b--black-20 boardingbox scrollarea-content' style={{overflow: 'scroll', height: '100vh'}}>
            {
                repositories.map((repo, index) => {
                    console.log(repo.name)
                    return <Note name={repo.name} desc={repo.name} key={index} onClick={ this.handleClick.bind(this) }/>
                })
            }
        </div>
    )
}

存儲庫正在改變我想要的方式，但是由於某種原因，它沒有被重新渲染。 我從父級傳遞了repositiores屬性。

我第一次渲染它（單擊搜索按鈕，從服務器獲得響應，並設置存儲庫數組），它的工作正常。 但是在第二次搜索中，當數組中有東西時，它不能正常工作，也不會重新渲染。

更新：

父母的渲染/ onClick

render() {
    const {repositories} = this.state
    return (
      <div className='w-third navpanel br b--black-20'>
        <SearchBar onClick={this.onClick} onChange={this.onChange}/>
        <RepoList repositories={repositories}/>
      </div>

      //<NewNote />
      //<Tags />
      //<NoteList />
    );
}

onClick = (event) => {
    const {searchTerm} = this.state

    let endpoint = 'https://api.github.com/search/repositories?sort=stars&order=desc&q=' + searchTerm;
    fetch(endpoint)
        .then(blob => blob.json())
        .then(response => {
            if(response.items)
              this.setState({ repositories: response.items });
        })
}

更新：

搜索比較：

constructor({onClick, onChange}) {
super()
this.onClick = onClick
this.onChange = onChange
this.state = {
  imageHover: false
}}

render() {
return (
  <div className='flex items-center justify-between bb b--black-20'>
    <div className='ma2 inputContainer w-100'>
      <input className='pa1 pl4 boardingbox w-100 input-reset ba b--black-20 br4 black-50 f6' placeholder='repos' type="text" onChange={this.onChange}/>
    </div>
    <div className='mr2'>
      <div className='boardingbox pointer contain grow'>
        <img src={(this.state.imageHover) ? NoteImageOnHover : NoteImage} alt=''
          onMouseOver={()=>this.setState({imageHover: true})}
          onMouseOut={()=>this.setState({imageHover: false})}
          onClick={this.onClick}/>
      </div>
    </div>
  </div>
)}

第一回應

第二回應者

Answer 1

根本原因很可能是由於函數綁定中的錯誤。

在SearchComponent您正在使用“ props”在構造函數中創建函數綁定。 這可能導致SearchComponent引用onClick和onChange函數的錯誤實例。 建議參考官方文檔以獲取更多詳細信息。

您不需要重新綁定SearchComponent的功能，只需使用props收到的功能。

  <input className='pa1 pl4 boardingbox w-100 input-reset ba b--black-20 br4 black-50 f6' placeholder='repos' type="text" onChange={this.props.onChange}/>
  <!-- snipped other irrelevant code -->
    <img src={(this.state.imageHover) ? NoteImageOnHover : NoteImage} alt=''
      onMouseOver={()=>this.setState({imageHover: true})}
      onMouseOut={()=>this.setState({imageHover: false})}
      onClick={this.props.onClick}/>

為什么會發生這種現象，請記住，構造函數僅在構造組件實例后才被調用，一旦它被創建並保持活動狀態，React 生命周期就會被接管。

因此，當您第一次渲染屏幕時，就創建了該組件，並且由於所有組件中只有1個，因此它可以正常工作。 當您運行第一個搜索時：onChange / onClick回調會修改父組件的狀態。 然后調用父組件上的render 。

此時，您的SearchComponent可能會保留錯誤的回調方法實例，從而不會在父對象上設置狀態，因此不會強制重新呈現。

有關構造函數的其他說明

通常，您不應該在構造函數中引用props ，但是如果需要，則需要使用以下格式。 以下是相關文檔 ：

constructor(props) {
   super(props);
   // other logic
}

Answer 2

我為能這樣搞砸感到非常really愧。 所以基本上問題是：

return <Note name={repo.name} desc={repo.name} key={index} onClick={ this.handleClick.bind(this) }/>

因此，我非常愚蠢地使用INDEX作為KEY，因此無法再次將相同的鍵添加到數組中。

謝謝大家！ :)