Reactjs 如何在React中的状态更改时更新道具的值

我有一个父React组件（MainComponent），它呈现一个子组件（KeyComponent），并将一个常量作为prop（myID）传递。父组件还跟踪状态“activeLink”

import theKeyComponent from "../components/theKeyComponent.jsx";

export default class MainComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
     activeLink: '#section1'
    }
  }
  render(){
   const myId = this.state.activeLink === '#section1' ? '0001' : '0002';
   return(){
     <theKeyComponent myID={myID} />
     <otherComponent otherPropsHere={otherProps} />
   }
  }
}

我想根据“activeLink”的值更改常量myID的值。首次安装两个组件时，这不是问题。但是，当“activeLink”的值更改时，“myID”不会更改，因为子组件已装入

我正努力想知道这样做的“反应方式”是什么。是否应将“myID”设置为另一个状态，并且为activeLink设置状态的函数应包括另一个设置myID状态的函数？或者这会使事情变得过于复杂，有一种更简单的方法可以只重新呈现特定的子组件，以便它考虑myID的新值

我是新手，所以我希望能从社区得到一些澄清

import theKeyComponent from "../components/theKeyComponent.jsx";

export default class MainComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
     activeLink: '#section1'
    }
  }

 static getDerivedStateFromProps(props, state) {
    if (props.activeLink !== state.activeLink ) {
      // updating the state here if there are any changes in props.
      return {
        activeLink: props.activeLink,
      };
    }

    // Return null if the props hasn't changed
    return null;
    }

使用getDerivedStateFromProps钩子查找道具的更改。您需要更新道具状态的更改

 render(){
  // now, here your state is updated. 
   const myId = this.state.activeLink === '#section1' ? '0001' : '0002';
   return (
     <theKeyComponent myID={myID} />
     <otherComponent otherPropsHere={otherProps} />
   )
  }

render（）{
//现在，您的状态已更新。
const myId=this.state.activeLink=='#section1'？'0001'：'0002'；
返回(
)
}

欢迎提出任何建议

第一次安装两个组件时，这不是问题 时间但是，当“activeLink”的值更改时，“myID”不会更改 更改，因为子组件已装入

问题在于如何处理API调用的触发器。

componentDidMount

仅在组件最初安装时触发。如果状态已更新，则不会触发此操作。您需要使用

componentdiddupdate

React Lifecycle来扩充

componentDidMount

componentDidUpdate

将在您的activeLink状态更改时触发，因为您将其作为道具传递给KeyComponent

componentDidUpdate() {
    myAPImethod('init', this.props.myID);
} 

---

参考：

在同一主组件中，您在何处设置activeLink的新状态？以便KeyComponent上的myID属性不会反映主组件渲染中设置的myID常量？您能再显示一点关于KeyComponent的代码吗？确切地说，KeyComponent上的myID属性最初只反映myID的值，但在activeLink更改时尝试更改该值。activeLink的setState函数在MainComponent中定义，但在otherComponent中触发。在KeyComponent中没有什么重要的东西，它只接收prop.myID并使用它从我正在使用的API初始化对象。我将对问题进行编辑以增加一点反应方式是简单地实现

componentdiddupdate

（或

useffect

，在功能组件中使用

myId

依赖项）以“反应”道具更新。请包括使用未更新的

myId

的组件的代码。谢谢Azizul，让我消化一下。我不确定我是否已经清楚地解释了这个问题，所以这个解决方案可能不是我正在考虑的。在我的例子中，我试图监听“activeLink”状态中的更改，并通过更改道具的值来响应这些更改。也许你在谈论同样的问题，我会看看getDerivedStateFromProps钩子，看看它是否能让senseLet知道你在哪里更改道具。这样我才能以一种合适的方式帮助你。答案更新，看看@ALOPEZ02代码中应该放置的函数getDerivedStateFromProps在哪里？只是想让您知道，正如95faf8e76605e973所指出的，问题更多地与我在keyComponent中使用的API方法有关，而不是React问题。当activeLink的值更改时，React确实在重新呈现组件，但我没有考虑在更改的同时必须重新初始化API对象。我已经在keyComponent中的componentDidUpdate方法中完成了这项工作，它工作正常。无论如何，谢谢你的帮助。当然这是有意义的95faf8e76605e973谢谢你的帮助。我现在就试试看它是否管用。我已经试过componentDidUpdate方法。我看到它按照你的建议管用。我发现的问题是，我正在初始化的API中的对象在按顺序进行初始化时会导致问题。我想我需要找到一种方法，只有当activeLink的状态发生变化时才这样做，而不是在任何更新发生时。将查看useEffect方法。@alopez02通常您需要将以前的状态/道具与当前状态/道具进行比较，然后采取一些措施。如果你盲目地做没有比较的事情，可能会导致不良行为。至少使用

useffect

可以限制何时使用依赖项数组触发效果回调。@95faf8e76605e973有意义。我再看看。谢谢你的指导

componentDidUpdate() {
    myAPImethod('init', this.props.myID);
}