React不实现DOM更改；它有时会等待。所以，当它看到
我想在单击保存按钮时渲染一个snackbar组件，方法是将showSnackbar状态设置为true，并在主渲染方法中进行一个简单的条件测试。反应101，没什么大不了的。这个小吃条组件在2秒后自动隐藏。
问题是，我希望这个状态重置回false，这样用户就可以再次单击保存按钮，并再次渲染snackbar组件，因为我希望他保持在同一个表单上。我尝试了很多技术，但都失败了。这是我正在使用的代码。。。也许我错过了一个微不足道的方法：
class MyForm extends Component {
state = {
showSnackbar: false
};
..
saveChanges = async () => {
// this technique actually toggles the states in sequence successfully
// but I guess since it's super fast, React is not able to render the
// snackbar
await this.renderSnackbar();
await this.unrenderSnackbar();
};
renderSnackbar = async () => {
console.log("render"); // This is being displayed in console
await this.setState({ showSnackbar: true });
};
unrenderSnackbar = async () => {
console.log("unrender"); // This is being displayed in console
await this.setState({ showSnackbar: false });
};
..
..
render() {
return (
..
{this.state.showSnackbar && (
<MessageSnackbar message="Saved successfully!" />
)}
..
)
}
}
使用带有回调函数的"setState"，该函数可以恢复状态。
class MyForm extends Component {
state = {
showSnackbar: false,
message: ''
};
saveChanges = () => {
..
this.setState({ showSnackbar: true, message: 'Saved successfully' }, () => {
setTimeout(() => { this.setState({ showSnackbar: false }) }, 2000);
})
};
render() {
const { showSnackbar, message } = this.state;
return (
{ showSnackbar && (
<MessageSnackbar message />
)}
..
)
}
}
state从一个值到另一个值的变化并立即返回时，它显然不会触及DOM。
使用setTimeout，您将看到差异：
this.renderSnackbar();
setTimeout(() => { this.unrenderSnackbar(); }, 2000);
另一件事。this.setState不返回promise，如果您想在更改应用于DOM后仅运行一些代码，请传递回调函数：
this.setState(newState, callbackFunction)
好吧，如果我正确理解你，那么有两个快速的解决方案。
如果MessageSnackbar组件是您自己的，那么您可以添加一些道具(例如onMount，将您将在其中执行this.setState({ showSnackbar: false }的一些函数传递给该道具，然后在MessageSnackbar的componentDidMount中调用this.props.onMount()
否则，您可以使用componentDidUpdate:
componentDidUpdate(prevProps, prevState) {
if (this.state.showSnackbar && !prevState.showSnackbar) {
this.setState({ showSnackbar: false })
}
}