我如何将 useState 值从子级传递给父级答案

【问题标题】：How can i pass useState value from child to parent我如何将 useState 值从子级传递给父级
【发布时间】：2021-12-26 06:59:43
【问题描述】：

我有两个子组件，它们有一个单独的状态。现在我想使用两个子组件中的状态并在父组件中渲染它。我该怎么做呢

function ChildA() {
  const [solutestate, setsolutestate] = useState("");
  return (
    <div>
      <Jsme
        height="300px"
        width="400px"
        options="oldlook,star"
        onChange={setsolutestate}
      />
    </div>
  );
}

const childB = () => {
  const [solventstate, setsolventstate] = useState("");

  return (
    <div>
      <Jsme
        height="300px"
        width="400px"
        options="oldlook,star"
        onChange={setsolventstate}
      />
    </div>
  );
};


function App() {
  return (
    <div className="App">
      <ChildA />
      <ChildB />

      <div>{solutestate}</div>
      <div>{solventstate}</div>
    </div>
  );
}

【问题讨论】：

您的文字基本上告诉我们，这根本不是子状态，而是父状态，子中的动作应该触发父状态的变化，而不是子状态。他们可能会得到这个事件，但他们应该通过调用父母给他们的 props-passed 处理函数来处理它，这让父母为自己设置这个值。

标签： reactjs react-props react-context

【解决方案1】：

您应该将状态保存在父级中（称为提升状态），然后将设置器传递给子级。

function ChildA({ setsolutestateA}) {
    return (
      <div>
        <Jsme
          height="300px"
          width="400px"
          options="oldlook,star"
          onChange={setsolutestateA}
        />
      </div>
    );
  }
  
  const childB = ({{ setsolutestateB}}) => {
    return (
      <div>
        <Jsme
          height="300px"
          width="400px"
          options="oldlook,star"
          onChange={setsolutestateB}
        />
      </div>
    );
  };
  
  
  function App() {
    const [solutestateA, setsolutestateA] = useState("");
    const [solutestateB, setsolutestateB] = useState("");

    return (
      <div className="App">
        <ChildA {...{setsolutestateA}}/>
        <ChildB {...{setsolutestateB}}/>
  
        <div>{solutestateA}</div>
        <div>{solutestateB}</div>
      </div>
    );
  }

【讨论】：

谢谢，它解决了我的问题，但你能给出更多关于它是如何工作的解释吗？使用...{} 得到了价值
它只是 javascript 解构，你可以在 MDN 上阅读更多内容，它只是传递许多 props 的简写语法。但是，不要过度使用它，因为它会损害性能（每次解构都会创建一个新对象）
您在 childB 中使用了两个 {{}} 是故意还是错误。我得到了输出，但它正在重复。我该怎么办？
提供工作代码沙箱，我可以帮助你

【解决方案2】：

您应该将一个设置状态的函数从您的父组件传递给子组件，以便子组件可以通过调用通过 props 传递的函数来更新父组件的状态。

例如：家长：

function App() {
  const [solventstate, setsolventstate] = useState("");

  const sendDataToParent = (solventstate) => { // the callback. Use a better name
    setsolventstate(solventstate);
  }
 
  return (
    <div className="App">
      <ChildA sendDataToParent={sendDataToParent}/>
      <ChildB sendDataToParent={sendDataToParent}/>
    </div>
  );
};

孩子：

const childB = ({sendDataToParent}) => {
  return (
    <div>
      <Jsme
        height="300px"
        width="400px"
        options="oldlook,star"
        onChange={sendDataToParent(solventstate)}
      />
    </div>
  );
}:

【讨论】：