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 作为参数来生成自己的状态）。

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

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

Answer 1

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

1. 以两种方式使用parentState。
   1. 作为Child 道具。每当Parent 更改其值时，这将始终更新。
   2. 作为Child 的useState 挂钩之一的初始值。这将初始化孩子的派生状态，但将允许Child 状态根据Child 组件内的用户操作随时间而偏离。
2. 当parentState 变量发生变化或childStateSettings 变量发生变化时，使用useEffect 钩子触发您的Child getData 函数。
3. 在Child 中使用多个useState 挂钩将状态的非衍生部分与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 2

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

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

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

function Child(props) {
}

Answer 3

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