Reactjs React状态钩子不向元素传递更改

我有以下（简化）代码：

import React，{useState，useffect}来自“React”；
从“@material ui/core/Button”导入按钮；
从“@material ui/core/Snackbar”导入Snackbar；
从“@material ui/lab/Alert”导入MuiAlert；
const CheckIn=props=>{
const[success，setSuccess]=使用状态（false）；
const[error，setError]=useState（false）；
常量handleClick=（）=>{
//向签入发送请求：）
设置成功（true）；
}
返回(
登记入住
成功
错误
)
}
常量警报=道具=>{
const[open，setOpen]=useState（props.open）；
常量handleClose=（）=>{
setOpen（假）；
}
返回(
{props.children}
)
}

我的期望是，当从签入组件按下按钮时，

success

变量被设置为

true

，并传递到警报组件，该组件将打开

Snackbar

，并在屏幕上显示警报。随后，6秒钟后，

Snackbar

触发

handleClose

并再次关闭警报

现在的情况是，警报永远不会弹出。我尝试的是将

Snackbar-open={open}

更改为

Snackbar-open={props.open}

，以检查属性是否正确地从父级传递，这可以正常工作，但此后警报无法再关闭

---

我主要是在寻找为什么它不起作用，而不是有一个解决办法。

当前在警报中设置打开只在警报中设置本地状态，但在签入中打开没有改变。您可以将函数从CheckIn传递到Alert，以更改CheckIn中的打开值，而不是复制prop

由于警报（及其关闭按钮）仅在“打开”为真时显示，因此可以使用切换关闭警报

const CheckIn=（）=>{
const[success，setSuccess]=React.useState（true）；
const[error，setError]=React.useState（true）；
const toggleSuccess=React.useCallback(
（）=>setSuccess（成功=>！成功），
[]
);
const toggleError=React.useCallback(
（）=>设置错误（错误=>！错误），
[]
);
返回(
切换成功
切换错误
成功
错误
);
};
常量警报=（{打开、关闭、子项}）=>{
还开着吗(
{儿童}
关闭
) : (
''
);
};
ReactDOM.render(
,
document.getElementById（'root'））
);

谢谢你的片段。我知道您可以从其父级传递函数来处理子级的状态。但在我的例子中，父组件除了设置其初始状态外，不应该关心子组件内部发生的任何逻辑。那么，为什么子组件要通过父组件更新其状态呢？
但是在我的情况下，父组件除了设置其初始状态之外，不应该关心子组件内部发生的任何逻辑
，那么为什么父组件有
success
状态和一个按钮来更改它呢？您的家长（签入）已具有更改警报的状态和逻辑。：）是的，对不起，请忽略这一点。我没有好好思考。因此，我的代码不起作用的原因是
useState
只设置初始状态，不对以后对
props所做的任何更改做出反应。open
？@404确切地说，警报在装载到本地状态时只使用props.open，此后，除非您卸载或（可能）卸载它，否则您无法再控制来自签入的警报为它提供一个唯一的密钥。我不建议这样做，让警报由它的家长控制，因为这可能是你想要的。