Javascript ReactJS：更改子组件的状态

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

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));
}

功能父级（道具）{
const[parentState，setParentState]=useState（someState）；
返回(
setParentState（newState）>按钮
}
功能儿童（道具）{
const[childState，setChildState]=useState（getState（props.parentState））；
}

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

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

---

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

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

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

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

function Child(props) {
}

功能父级（道具）{
const[parentState，setParentState]=useState（someState）；
返回(
setParentState（newState）>按钮
}
功能儿童（道具）{
}

当您更改父状态时，子状态将重新绘制。您可以使用setState（）在构造函数中修改您的子状态，同时在DOM中重新创建它。

根据您的澄清意见，这里有一些关于如何继续的想法。根据

parentState

对象包含的内容，可能有更好的方法来做这件事，但希望这将有助于激发一些想法

以两种方式使用父状态。

作为

子项

道具。每当

父项

更改其值时，该属性将始终更新

作为

子

的

使用状态

挂钩之一的初始值。这将初始化子的派生状态，但允许

子

状态随时间根据

子

组件内的用户操作而偏离

当

parentState

变量更改或

childStateSettings

变量更改时，使用

useffect

hook触发

Child

getData函数

在

Child

中使用多个

useState

钩子，将状态的非派生部分与

子

状态的继承/派生部分分开。对于派生状态，

childStateSettings

，使用

parentState

作为初始值

因此，

子项

类似于：

从'react'导入{useffect，useState}；
功能儿童（道具）{
const{parentState}=props；
//来自父项的子设置的初始值
const[childStateSettings，setChildStateSettings]=useState（parentState）；
//子女的非继承/非衍生状态
const[childStateData，setChildStateData]=useState（{}）；
//取决于设置的数量和使用的方式
//用户可以使其不同于父/全局设置，
//您可能希望有更多的useState钩子来进一步分离
//将设置分为各个部分。我认为这会简化
//您的各种“onChange”/“onSelection”等函数逻辑，但我
//没有更多的细节，我无法确定。
useffect（（）=>{
getData（childStateDerivative、childStateNonDerivative）；
}，[parentState，childStateSettings]}；
//我发明的伪代码是为了猜测
//根据您的评论，您可能需要如何使用这些东西
const getData=（parentState，childState）=>{
//如果两个对象中都存在重复的关键点，则最后一个排列对象优先
const combinedState={…parentState，…childState}；
API.get（'http://some_path，组合状态）。然后（数据=>{
setChildStateData（数据）；
});
};
//您可能会绘制一些输入，以便
//用户可以更改子对象的状态设置，但
//我没有费心去猜那会是什么样子。
回报率（…）；
}

这回答了你的问题吗？你能详细说明一下家长的全局值是如何应用于孩子的吗？你是否将整个

家长状态

应用于孩子？如果是，孩子们甚至需要自己的状态吗？我想你的问题意味着家长会根据需要“重置”孩子，但然后，子项可以偏离父项并在状态上与父项不同，直到父项的下一次“重置”将子项恢复为与父项相同。我是否在正确的轨道上？Aurélien：我已经将父项的状态转移给子项，问题是在子项中，状态是在初始化时设置的（请参见子项状态）并且不随父级状态的后续更改而更改。@WGriffing：子级加载一个依赖于父级状态（例如用户的全局设置）及其自身的非派生状态（组件的设置）的数据数组。这两个因素作为返回子级数据的函数的参数传递。可能我遗漏了什么，但子级的数据没有更改。我使用的是useState，它在初始化时设置数据，但我看不到任何方法在之后触发它。子组件在父级的状态更改后不会更改其状态，即使我正在将状态传递给子组件。该状态是否应该在单击按钮时更改？useState有两个成员：状态变量和用于更改该变量的回调挂钩。除此之外，我们还需要查看子组件的代码。如果没有这两个组件的完整代码，我就不会有更多的内容