React：在子组件中更改了 state。 如何查看父组件的变化？

Question

对于我正在使用的网站，我制作了一个带有复选框的组件，该复选框会触发父组件中的 state 更改。 我已通过子组件在控制台中检查 state 已更改，但我希望父组件也“注意到”更改。 我已经尝试过 useEffect 和 componentDidUpdate 但它们都不会被 state 更改触发。

澄清一下，结构如下所示：

Parent：拥有初始的 state Child：通过 parent 获取到 state，并更改为 state

在页面刷新时，父级注意到 state 更改，但我希望无需刷新页面即可完成此更改。

我希望这是有道理的，提前谢谢你:)

Answer 1

这是你想要的？

import React, { useState } from "react";

const Parent = () => {
  const [someState, setSomeState] = useState("Initial Some State");

  const onChangeSomeState = (newSomeState) => {
    setSomeState(newSomeState);
  };

  return (
    <div>
      Parent:
      <Child
        someState={someState}
        onChangeSomeState={onChangeSomeState}
      ></Child>
    </div>
  );
};

const Child = ({ someState, onChangeSomeState }) => {
  const handleChangeStateClick = () => {
    onChangeSomeState("New Some State from Child");
  };
  return (
    <div>
      Child:{someState}
      <input
        type="button"
        onClick={handleChangeStateClick}
        value="Change state from Child"
      ></input>
    </div>
  );
};

export default Parent;

Answer 2

如果我对你的问题的理解正确，你可以将回调 function 传递给子组件。 这样，您将从父组件中的回调接收值，如下所示：

const ParentComponent = () => {
    const [someState, setSomeState] = useState()

    const childCallback = (value) => {
       setSomeState(value)
    }

    return <ChildComponent callback={childCallback} />
}

Answer 3

React 的本质意味着数据沿着 dom 树向下流动。 使用道具可以做到这一点。

当道具发生变化时，反应会注意到它，这会导致道具的接收者重新渲染。 但是，正如您所发现的那样，这是一种单向关系，永远只能是父子关系。

javascript 的美妙之处在于您可以像对待字符串或数字一样对待函数并传递它们。 在这种情况下作为道具。

因此，虽然孩子不能直接“告诉”父母发生了一些变化，但父母可以传入一个 function，孩子可以使用它来告知变化。

这种从父母和孩子可以用来通知父母的“处理程序” function 传递值的模式非常普遍，并且是一个很好的模式。

以标准文本输入为例。

const Parent = () => {
  // This is our parent's state
  const [inputValue, setInputValue] = useState('hello world');

  // This is the handler we will give to the child to let us know of changes
  const handleInputChange = (e) => setInputValue(e.target.value) 

  return <input
    value={inputValue}
    onChange={handleInputChange} 
  />
}

在上面的示例中，子项（输入）在更改时将调用提供给它的 function，这将更新父项的 state。反应组件上的任何 state 更新（就像道具更改一样）将导致重新渲染，因此视觉更新。

我在你自己编写的任何孩子中使用了一个内置的<input> ，当你想让父母知道发生了什么事时，你只需要接受一个你在孩子内部调用的“处理函数”。

Answer 4

据我了解，如果我没弄错的话，我认为你应该将触发事件作为道具从父母传递给孩子。

父级（功能组件+钩子）：

const [ userName, setUserName ] = useState("");

return(
  <Child doChangeProps={setUserName} />
)

孩子（功能组件+钩子）：

const { doChangeProps } = props;

return(
  <input onChange={ e => { doChangeProps(e); } } />
)

或者，您可以使用上下文来实现更简单的数据流。

Answer 5

function ParentComponent(){
    const [state, setState] = useState()

    useEffect(() => {
       console.log({ state });
    },[state])

    return <ChildComponent state={state} setState={setState} />
}