ReactJS：更改子组件的状态

Question

我有父组件，它在其状态中包含一个全局值。 此值的更改必须触发子组件状态的更改，如下例所示：

function Parent(props) {
const [parentState, setParentState] = useState(someState);

return (
  <button onClick={() => setParentState(newState)>Button</button>
  <ChildComponent parentState={parentState} />
}

function Child(props) {
const [childState, setChildState] = useState(getState(props.parentState));
}

单击本示例中的按钮应更改触发 Child 组件中状态的非平凡更改（它使用 parentState 作为参数来生成自己的状态）。

我想这个问题的第一个答案是提升状态 - 但是我不想这样做，因为有很多 Child 通过 .map 函数生成 - 我需要将它们的状态保留在数组中并传播它到所有子组件。 父组件中的值是与所有子组件相关的全局值，当 parentState 更改时，所有子组件都必须更改其状态。

有没有什么好的方法可以在不提升子组件状态的情况下实现这一目标？ 我希望我已经足够好地描述了这个问题——如果不是，我很乐意更新信息。

Answer 1

孩子不应该有自己的状态。 它应该完全依赖于父状态/道具。

function Parent(props) {
const [parentState, setParentState] = useState(someState);

return (
  <button onClick={() => setParentState(newState)>Button</button>
  <ChildComponent parentState={parentState} />
}

function Child(props) {
}

Answer 2

根据您的澄清评论，这里有一些关于如何进行的想法。 根据parentState对象包含的内容，可能有更好的方法来做到这一点，但希望它有助于激发一些想法。

1. 以两种方式使用parentState 。
   1. 作为Child道具。 每当Parent更改其值时，这将始终更新。
   2. 作为Child的useState钩子之一的初始值。 这将初始化子组件的派生状态，但将允许Child状态根据Child组件内的用户操作随时间发生偏离。
2. 使用useEffect钩（S）来触发您的Child的getData功能，当parentState变量发生变化时，或者当childStateSettings变量的变化。
3. 使用多个useState钩Child从继承的/微分部分的状态的非衍生部分分离Child的状态。 对于派生状态childStateSettings ，使用parentState作为初始值。

所以Child变成了这样：

import { useEffect, useState } from 'react';

function Child(props) {
  const { parentState } = props;

  // initial value of child settings from parent
  const [childStateSettings, setChildStateSettings] = useState(parentState); 

  // non-inherited/non-derivative state of child
  const [childStateData, setChildStateData] = useState({}); 

  // Depending on the number of settings and ways in which
  //  the user can make them different than the parent/global settings,
  //  you may want to have even more useState hooks to further separate
  //  the settings into individual pieces. I think this would simplify
  //  your various `onChange`/`onSelection'/etc. function logic, but I
  //  couldn't say for certain without more details.


  useEffect(() => {
    getData(childStateDerivative, childStateNonDerivative);
  }, [parentState, childStateSettings]};

  // pseudocode invented by me as a guess of 
  //  how you might need to use things based on your comment
  const getData = (parentState, childState) => {
    // last spread object takes precedence if duplicate keys are present in both objects
    const combinedState = { ...parentState, ...childState }; 
    API.get('http://some_path', combinedState).then(data => {
      setChildStateData(data);
    });
  };

  // you'll probably draw some inputs so that the 
  //  user can alter the child's state settings but
  //  I didn't bother trying to guess what that might look like.
  return (<>...</>); 

}

Answer 3

当您更改父状态时，孩子将重绘。 您可以在构造函数中使用 setState() 来修改正在 DOM 中重新创建的子状态。