[英]React props not getting updated when used in function
I have a really strange behaviour.我有一个非常奇怪的行为。 I have the following code (super simple version):
我有以下代码(超级简单的版本):
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)} />
}
The first component has a state with overlays for a HTML5 canvas.第一个组件具有 state 和 HTML5 canvas 的覆盖层。 It returns a component which handles the actual overlay.
它返回一个处理实际覆盖的组件。 I can add a overlay {id: 123} there and it is set as a new overlay.
我可以在那里添加一个覆盖 {id: 123} 并将其设置为一个新的覆盖。 It then is given as a prop to the CanvasOverlay component.
然后将其作为 CanvasOverlay 组件的道具提供。 When I console.log this it shows in the first console log but not in the on within the "openEditOverlayDialog" function.
当我 console.log 时,它显示在第一个控制台日志中,但不在“openEditOverlayDialog”function 中的 on 中。
What am I missing?我错过了什么?
Help is much appreciate.非常感谢帮助。 Thank you all!
谢谢你们!
const editOverlays = () =>
setOverlays([...overlays, id: 123]);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.