Reactjs 父组件状态更改时，子组件未更新

我有一个父组件，其中一个数组处于其状态，随着时间的推移，该数组也会被添加

这是家长。这里面有很多内容，但我已经将其浓缩到主要关注点：状态、componentShouldUpdate函数（该函数适用于组件需要执行的所有其他操作）和show data方法（我可以确认，

gaitStats

确实正确更新）

GaitStat，孩子：

class GaitStat extends Component {
  constructor(props) {
    super(props);
  }


  render() {
    return (
      <div>
        Hi
        <p>{this.props.gaitStats}</p>
      </div>
    );
  }
}

类GaitStat扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
你好
{this.props.gaitStats}

);
}
}

---

据我所知，gaitStatus在初始渲染后不会作为道具重新渲染.state.gaitStatus。无论父组件重新渲染或更新其状态多少次，道具都将保持为空数组。

您可以在子组件中尝试使用

shouldComponentUpdate(nextProps, nextState) { 
  if(nextProps.gaitStats != this.props.gaitStatus) {
   this.forceUpdate();
 }
}

---

您可以在子组件中尝试使用

shouldComponentUpdate(nextProps, nextState) { 
  if(nextProps.gaitStats != this.props.gaitStatus) {
   this.forceUpdate();
 }
}

---

shouldComponentUpdate方法防止类在状态更改时更新。 您应该将shouldComponentUpdate方法更新为以下内容

shouldComponentUpdate(nextProps, nextState) {
   if(nextState !== this.state){
        return true;
   }
   if (this.props.data !== null) {
     if (this.props.data !== nextProps.data) {
       this.showData();
    }
      return false;
    }
   if (this.props.canvas.x !== null) {
     return true;
   } 
   if (this.state.grabData) {
     return true;
   }

  return false;
}

---

您可以找到有关shouldComponentUpdate的更多信息

您的shouldComponentUpdate方法可以防止类在状态更改时更新。 您应该将shouldComponentUpdate方法更新为以下内容

shouldComponentUpdate(nextProps, nextState) {
   if(nextState !== this.state){
        return true;
   }
   if (this.props.data !== null) {
     if (this.props.data !== nextProps.data) {
       this.showData();
    }
      return false;
    }
   if (this.props.canvas.x !== null) {
     return true;
   } 
   if (this.state.grabData) {
     return true;
   }

  return false;
}

您可以找到有关shouldComponentUpdate的更多信息，请尝试以下操作：

 shouldComponentUpdate(nextProps) {
   if ((this.props.data === null && this.props.data !== nextProps.data) || this.props.canvas.x !== null || this.state.grabData) {
        return true;
      }
  this.showData();
  return false;
}

这包括一次渲染的所有条件，如果满足条件，则运行showData并返回false，例如不更新，请尝试以下操作：

 shouldComponentUpdate(nextProps) {
   if ((this.props.data === null && this.props.data !== nextProps.data) || this.props.canvas.x !== null || this.state.grabData) {
        return true;
      }
  this.showData();
  return false;
}

---

这包括在一个if和if noting中渲染的所有条件满足条件，然后运行showData并返回false，例如不更新

GaitMeasure类上的shouldcomponentupdate方法确保组件仅在其道具更改时更新。因此，更改状态不会触发GaitMeasure类的重新渲染，因此Gaitstat类从未收到新的属性您确定它正在重新渲染GaitMeasure吗？我认为您需要更改shouldcomponentupdate您的GaitMeasure类上的shouldcomponentupdate方法确保组件仅在其道具更改时更新。因此，更改状态不会触发GaitMeasure类的重新渲染，因此Gaitstat类从未收到新的属性您确定它正在重新渲染GaitMeasure吗？我认为您需要更改组件更新