Reactjs 子组件未通过更改道具进行更新

我正在尝试使用react native pulse，但在更新时遇到了一些困难。我在父级上使用组件，如下所示：

 <Pulse  color={this.pulseOptions.pulseColor} numPulses={this.pulseOptions.numPulses} diameter={this.pulseOptions.diameter} speed={this.pulseOptions.speed} duration={this.pulseOptions.pulseDuration} />

脉冲是这样接收它们的（脉冲分量）：

所以基本上我想要的是，当pulseOptions对象在父组件中更改时（状态更改时它已经更改），它应该作为pulse组件的新道具，并且应该使用它们更新自己。但它并没有这样做

整个脉冲分量如下：

谢谢你的帮助

编辑；当状态发生变化时：

  changePulseProps = () => {


                                                                      //Pulse Styling
                                                                      if (this.state.accuracy <= 20) {

                                                                        angryPulse = {
                                                                          numPulses: 4,
                                                                          diameter:500,
                                                                          speed:10,
                                                                          pulseDuration:1000,
                                                                          pulseColor: '#27ae60',

                                                                        }


                                                                        return  angryPulse

                                                              } 

---

更新道具并不总是更新组件的状态。在构造函数中设置状态，如果React认为没有必要重建组件，则只调用一次。 我建议您在子组件中实现getDerivedStateFromProps函数，以更好地管理传入的道具和新状态：

您就快到了

不过，有些逻辑有点混乱。这里的关键是，您需要保持数据朝一个方向流动

在React世界中，这意味着有状态值（随时间变化的值）将自动导致视图（用户看到的）在更改时更新

您应该在组件的状态中声明脉冲选项：

constructor(props){
    super(props);

    this.state = {
        color: this.props.color,
        duration: this.props.duration,
        image: this.props.image,
        maxDiameter: this.props.diameter,
        numPulses: this.props.numPulses,
        pulses: [],
        pulseStyle: this.props.pulseStyle,
        speed: this.props.speed,
        started: false,
        style: this.props.style
    };


}

this.state = {

    latitude: null,
    longitude: null,
    accuracy: null,
    numPulses: 1,
    diameter:200,
    speed:5,
    pulseDuration:1000,
    pulseColor: '#8e44ad',
}

    static getDerivedStateFromProps(props, state){

      return {
        ...state,
        color: props.color,
        duration: props.duration,
        image: props.image,
        maxDiameter: props.diameter,
        numPulses: props.numPulses,
        //pulses: [],
        pulseStyle: props.pulseStyle,
        speed: props.speed,
        //started: true,
        style: props.style
      }



  }

然后使用以下值调用组件：

 <Pulse  color={this.state.pulseColor} numPulses={this.state.numPulses} diameter={this.state.diameter} speed={this.state.speed} duration={this.state.pulseDuration} /> 

您可能需要添加一个onChange处理程序来更新状态

---

控制组件的数据有两种类型：道具和状态。道具由父级设置，并在组件的整个生命周期内固定。对于将要更改的数据，我们必须使用状态

在父级中，您将道具传递给子级使用道具，对于子级，它认为这是固定的。所以它没有接收和更新。这是

React

虚拟末日更新机制

因此，在父级中，使用this.state将其传递给子级

state = {
    latitude: null,
    longitude: null,
    accuracy: null,
    pulseOptions: {
    numPulses: 1,
    diameter:200,
    speed:5,
    pulseDuration:1000,
    pulseColor: '#8e44ad'
   }
 }


<Pulse  color={this.state.pulseOptions.pulseColor} numPulses={this.state.pulseOptions.numPulses} diameter={this.state.pulseOptions.diameter} speed={this.state.pulseOptions.speed} duration={this.state.pulseOptions.pulseDuration} />

状态={
纬度：空，
经度：空，
准确度：空，
脉冲选项：{
小脉冲：1，
直径：200，
速度:5,，
脉冲持续时间：1000，
pulseColor:“#8e44ad”
}
}

多亏@borisbezzolagetDerivedStateFromProps完成了这项工作。刚刚将其添加到子组件：

constructor(props){
    super(props);

    this.state = {
        color: this.props.color,
        duration: this.props.duration,
        image: this.props.image,
        maxDiameter: this.props.diameter,
        numPulses: this.props.numPulses,
        pulses: [],
        pulseStyle: this.props.pulseStyle,
        speed: this.props.speed,
        started: false,
        style: this.props.style
    };


}

this.state = {

    latitude: null,
    longitude: null,
    accuracy: null,
    numPulses: 1,
    diameter:200,
    speed:5,
    pulseDuration:1000,
    pulseColor: '#8e44ad',
}

    static getDerivedStateFromProps(props, state){

      return {
        ...state,
        color: props.color,
        duration: props.duration,
        image: props.image,
        maxDiameter: props.diameter,
        numPulses: props.numPulses,
        //pulses: [],
        pulseStyle: props.pulseStyle,
        speed: props.speed,
        //started: true,
        style: props.style
      }



  }

---

您可能会从本文中发现一些用处：您是否真的在组件中接收到了新的道具？因为这只是一个实现

shouldComponentUpdate（）

No的问题，我正在发送它们，组件没有接收。它保留了最初的属性我尝试的第一件事实际上是这个方法，它给了我无限的循环错误“超过最大更新深度”错误。这就是为什么我将脉冲选项分离为不同的对象。我在文本组件中尝试过它，但在这个脉冲组件上不起作用。@ugrdursun，您可以在循环中引导调用setState。请展示你的核心code@ugrdursun，我认为在渲染方法中，您可以使用

this.pulseOptions=this.changePulseProps（）

来获取，但该方法将更新，因此您会得到错误。请不要这样做。它使它成为一个循环。像这样使用`let pulseOptions={…this.state.}您好，我首先尝试了您的建议，它给了我“超过最大更新深度”错误，我分离了pulseOptions对象。对于另一个组件，我的方式是工作的，但不是这个脉冲组件