我可以将变量从子组件更新到父组件吗？

Question

假设我有一个组件 Child 嵌套在组件 Parent.

中

const Parent = () => {
  const [myParentData,setParentMyData] = useState({
    foo:'bar',
    hello:'world'
  });
  return (
    <Child
    data={myData}
    />
  )
}

const Child = (props) => {
  const [myChildData,setMyChildData] = useState(props.data);
}

我有一个“理论”问题。

Javascript变量是引用...
因此，如果我在 Child 组件中使用 setMyChildData 更新数据状态，这些更改也会反映在 myParentData（Parent 组件）中吗？

或者我是否被迫使用 store+reducer 来实现？

谢谢！

Answer 1

不，当您更改状态 myChildData 时，您不会更改通过道具发送的父亲数据。您还可以发送 setParentMyData 函数，通过此函数（儿子没有新状态）您将更改父亲的数据

Answer 2

当您在子项的初始状态中设置来自父项的数据，然后更改子项状态时，您现在只是在更改子项，因为它是全新的变量，这是一种更改父项状态的方法，您可以这样做:

const Parent = () => {
  const [myParentData, setParentMyData] = React.useState({
    foo: "bar",
    hello: "world"
  });
  return <Child data={myParentData} updateParentData={setParentMyData} />;
};

const Child = (props) => {
  const [myChildData, setMyChildData] = React.useState(props.data);

  return (
    <button
      onClick={() => {
        props.updateParentData((prevState) => ({ ...prevState, hello: "bye" }))
      }}
    >
      Change Parent Data
    </button>
  );
};

如果子项和父项相同，则无需在子项和父项中保持不同的状态。

你正在做的事情是这样的：

const parent = {foo:'bar',hello:'world'}
const child = {...parent}

child.foo = 'zoo'

它不会再影响父对象，因为它是新对象，在您使用新状态（子对象）中的父数据初始化后，组件状态也会发生上述情况

我可以将变量从子组件更新到父组件吗？

Can I update a variable from a child component to a parent component?

components

store

properties

reactjs