子項道具不反映父項的狀態變化

Question

我的應用程序中涉及的部分是利用4個組件，即1個父級和3個孩子。 如預期的那樣，父組件處理所有狀態並將值通過prop傳遞給子組件。

父組件包含用於更新狀態更改的方法，這些方法也通過props傳遞。 子組件除組件方法外沒有其他狀態，它們僅將道具用於可視數據。

我遇到的問題是，當我調用更新父狀態的方法時，父狀態已成功更新（通過控制台進行了驗證），但是通過其道具反映此狀態的子組件未呈現該狀態視覺上改變。

下面的代碼將盡力解釋：

父組件更新狀態方法：

handleUpvoteState(blurtIndex) {
    let blurts = [...this.state.followingBlurts],
        updatedBlurt = {...blurts[blurtIndex]};
    updatedBlurt.vote++;
    blurts[blurtIndex] = updatedBlurt;
    this.setState({
        followingBlurts: blurts
    });
    console.log(this.state.followingBlurts[blurtIndex].vote); // State change reflected.
}

父組件將狀態傳遞給子道具：

<LazyBlurtsPanel
     appendDate={this.state.appendDate}
     random={this.state.randomize} 
     blurts={this.state.followingBlurts} 
     handleLazyState={this.handleLazyState}
     handleUpvoteState={this.handleUpvoteState}
     lazyElement='lzyfollowing'
     apiMethod={this.state.apiMethod}
     currentUser={false}
 />

惰性面板組件（上面）然后通過props將數據發送到footer child：

<BlurtFooter 
   voteCount={this.props.blurts[i].vote}
   currentUser={this.props.currentUser}
   blurtId={this.props.blurts[i]._id}
   blurtIndex={i}
   handleUpvoteState={this.props.handleUpvoteState}
 />

當我打電話

this.props.handleUpvoteState(index)

在我的子頁腳組件中，父狀態已成功更新。 但是，頁腳組件不會重新呈現以反映父級的更新狀態。

這是不會重新渲染的頁腳組件代碼：

render() {
    return (
        <div className="blurt-panel-footer">
           <UpvoteCount voteCount={this.props.voteCount}/>

任何幫助，不勝感激。

編輯：關於如何調用blurtfooter有點困惑，所以我包括了有關如何在LazyBlurtPanel組件內的循環內構建面板的代碼。 這是該代碼：

for(let i=numRendered; i<renderCount; i++) {
  if (this.props.blurts[i]) {
    renderBlurts.push(
         <div className='blurt-panel' id={(((i + 1) % 6) === 0) ? this.props.lazyElement : 'false'} key={i}>
              <BlurtHeader blurt={this.props.blurts[i]} />
              <div className='blurt-panel-body'>
                  <Sanitizer dirty={ this.props.blurts[i].text } />
                  {
                      (this.props.blurts[i].blurtImg !== 'false')? <img src={'/images/blurt/' + this.props.blurts[i].blurtImg} /> : ''
                  }
              </div>
              <BlurtFooter 
                  voteCount={this.props.blurts[i].vote}
                  currentUser={this.props.currentUser}
                  blurtId={this.props.blurts[i]._id}
                  blurtIndex={i}
                  handleUpvoteState={this.props.handleUpvoteState}
                  key={this.props.blurts[i]._id} //Tried with and without key here..
              />
          </div>
      );
  }
}

Answer 1

嘗試更改BlurtFooter的調用方式。 即使不能解決問題，它仍將是更具可維護性的代碼

render() {
  const { currentUser, blurts, lazyElement, handleUpvoteState } = this.props;
  return (
    <Fragment>
      {
        blurts.filter(x => x).map((blurt, index) => (
          <div className="blurt-panel" id={(((index + 1) % 6) === 0) ? lazyElement : 'false'} key={blurt._id}>
              <BlurtHeader blurt={blurt} />
              <div className="blurt-panel-body">
                  <Sanitizer dirty={blurt.text} />
                  {
                      blurt.blurtImg !== 'false' &&
                      <img src={`/images/blurt/${blurt.blurtImg}`} />
                  }
              </div>
              <BlurtFooter 
                  voteCount={blurt.vote}
                  currentUser={currentUser}
                  blurtId={blurt._id}
                  blurtIndex={index}
                  handleUpvoteState={handleUpvoteState}
              />
          </div>
        )
      }
    </Fragment>
  );
}

可以進行很多其他改進，但是要了解其工作原理，尤其是正確設置key是必須的。

我不確定div上的id是什么，但是看起來也很臟，不應該在那里。

同樣也不需要部分blurts.filter(x => x) ，因此應該改進狀態以使其不需要

更新 ：請確保采用上面的最新代碼

Answer 2

狀態應始終以不變的方式進行更新。 通過這種方式，反應核心庫可以了解數據發生了變化。 數組和對象在內存中使用引用指針。 因此，即使我們在這些反射類型變量中更新值，也不會影響這些變量的原始內存位置。 因此，請在內存中創建一個新變量，然后復制您需要更新的狀態，然后使用新變量設置狀態。 這樣我們可以避免這個問題。 您也可以使用現代es6 +方法創建一個不變結構。