正在状态属性内的事件处理程序内设置状态

Question

我在从处于该状态中的事件更新状态时遇到问题。我的意思是，我有一个动态表单，这个表单的属性中必须有一个事件。我用我的问题编码了一个小组件，代码在url中https://codesandbox.io/s/material-demo-4wsib

Answer 1

问题是您存储的组件具有处于该状态的单击处理程序。通常，您应该只存储状态中所需的最小数据。它还使您的逻辑更易于遵循，因为您不需要同步状态中的组件。当使用React时，你应该根据状态描述你的UI应该是什么样子：

https://codesandbox.io/s/material-demo-vv3qw

import React from "react";
import IconButton from "@material-ui/core/IconButton";
import DeleteIcon from "@material-ui/icons/Delete";
import Visibility from "@material-ui/icons/Visibility";
export default function IconButtons() {
const [person, setPerson] = React.useState({
age: 25,
isTall: false,
name: "Ana"
});
return (
<div>
<span>{person.isTall ? "TRUE" : "FALSE"}</span>
<IconButton
onClick={() => {
setPerson({
...person,
isTall: !person.isTall
});
}}
>
{person.isTall ? <DeleteIcon /> : <Visibility />}
</IconButton>
</div>
);
}