时间戳

首页 > 解决方案 > 在函数中使用时 React 道具未更新

javascript - 在函数中使用时 React 道具未更新

问题描述

我有一个非常奇怪的行为。我有以下代码（超级简单的版本）：

const CanvasManager = () => {
  const [overlays, setOverlays] = useState([]);

  return <CanvasOverlay overlays={overlays} setOverlays={setOverlays} />
}



const CanvasOverlay = ({ overlays, setOverlays }) => {

  const [open,setOpen] = useState(false);

  // .. some code

  console.log(overlays) // First render: [], second render: [{id: 123}]

  const openEditOverlayDialog = id => {
    console.log(overlays) // First render: [], second render: []  <----- THIS IS THE PROBLEM
    const overlayData = overlays.find(o => o._id === id);
    setOpen(overlayData ); // <--- THIS IS WORKING, SO CONTEXT SEAMS RIGHT
  };

  const editOverlays = () => {
    const newOverlays = [...overlays];
    newOverlays.push({id: 123});
    setOverlays(newOverlays);
  }

  return <Button title="Edit Overlay 123" onClick={() => openEditOverlayDialog(123)} />
}

第一个组件具有 HTML5 画布覆盖的状态。它返回一个处理实际覆盖的组件。我可以在那里添加一个覆盖 {id: 123} 并将其设置为一个新的覆盖。然后将其作为 CanvasOverlay 组件的道具提供。当我使用 console.log 时，它会显示在第一个控制台日志中，但不会显示在“openEditOverlayDialog”函数的 on 中。

我错过了什么？

非常感谢帮助。谢谢你们！

标签： javascriptreactjs

解决方案

 const editOverlays = () => 
     setOverlays([...overlays, id: 123]);

推荐阅读