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

Posted 2023-04-14

【中文标题】我如何将 useState 值从子级传递给父级

【英文标题】：How can i pass useState value from child to parent

【发布时间】：2021-12-26 06:59:43

【问题描述】：

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

function ChildA() 
  const [solutestate, setsolutestate] = useState("");
  return (
    <div>
      <Jsme
        
        
        options="oldlook,star"
        onChange=setsolutestate
      />
    </div>
  );


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

  return (
    <div>
      <Jsme
        
        
        options="oldlook,star"
        onChange=setsolventstate
      />
    </div>
  );
;


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

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

【问题讨论】：

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

【参考方案1】：

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

function ChildA( setsolutestateA) 
    return (
      <div>
        <Jsme
          
          
          options="oldlook,star"
          onChange=setsolutestateA
        />
      </div>
    );
  
  
  const childB = ( setsolutestateB) => 
    return (
      <div>
        <Jsme
          
          
          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
        
        
        options="oldlook,star"
        onChange=sendDataToParent(solventstate)
      />
    </div>
  );
: