我的应用程序有问题的部分是利用4个组件，1个父母和3个孩子。正如预期的那样，父组件处理所有状态，并通过道具向子组件传递值。

父组件包含更新状态更改的方法，也通过道具传递。子组件除了组件方法之外没有其他状态，它们仅使用视觉数据的道具。

我遇到的问题是，当我调用该方法来更新父状态时，父状态被成功更新（通过控制台验证），但是子组件（通过其道具反映此状态）不会直观地呈现状态更改。

下面是我将尽力解释的代码：

父组件更新状态方法：

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}
 />

惰性面板组件（如上）然后通过道具将数据发送到页脚子级：

<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}/>

任何帮助非常感谢。

编辑：有一些混乱，关于如何模糊页脚被调用，所以我包括了面板如何在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>
      );
  }
}