如何从反应父组件获取更新状态答案

【问题标题】：How to get updated state from react parent component如何从反应父组件获取更新状态
【发布时间】：2021-07-10 07:49:24
【问题描述】：

我有以下结构

=父组件（以列表作为状态）

== 子组合列表={list})

=== Sub Comp2 list={list}

==== 节点列表={list}


export const Node = (props) => {

// some state setup
const [checked, setChecked] = useState(false)

const handleCheckbox = () => {
  if(!checked){
   //Checkbox checked, add this Node to list in Parent Component
   props.updateList(someLabel) 
  }
 else{
   props.removeFromList(someLabel)
 }
}

return( 
<TreeItem
icon = {<Checkbox checked={checked} onChange={handleCheckbox}}
> 
{expanded && !fetching ? childNodes : <TreeItem label="reached end" />
</TreeItem>

)

}

现在这按我的预期工作，但问题是，如果我折叠并展开其中一个父节点，它是一个 TreeView，我会丢失选中的值。

为了解决这个问题，我提出了

useEffect(() => {

var inList = props.list.find(function(item) { return item.name === label} ) !=== undefined 

if(inList){ setChecked(true)} else{setChecked(false)}

}, [])

现在上述工作按预期工作，但前提是我转到表单的下一页然后返回。问题是当列表更新时，useEffect 还在使用列表的旧状态。

如何强制 useEffect 使用最新的状态，或强制状态更新，因为它是异步的？

【问题讨论】：

第二个参数是useEffect(fn, props) 指定何时重新运行效果。在您的代码中，您有 [] 永远不会重新运行效果。您需要[props.list]，因为当list 更新时，您的效果需要重新运行

标签： javascript reactjs

【解决方案1】：

根据您的情况，您有几种选择。如果您只想要子组件中的最新父状态，您可以将父状态以及更新器作为道具传递给子组件，如下所示。

家长：

const ParentComponent = () => {
const [checked, setChecked] = React.useState(false);

  return (
    <ChildComponent checked={checked} setChecked={setChecked} />
  )
}

孩子：

const ChildComponent = ({checked, setChecked}) => {
  return (
  <>
    <p>{checked}</p>
    <button onClick={() =>setChecked(!checked)}>Button!</button>
  </>
  )
}

如果您尝试在并行组件中使用状态信息，或者如果您将状态传递到多于一层或两层，请考虑使用上下文。

【讨论】：