从 React 钩子读取状态

Question

我有以下代码const initialState = {    values: {        email: '',        password: ''    },    touched: {        email: false,        password: false    },    errors: false,    isValid: false,    isLoading: false,    submitError: null};function SignIn(props) {    const [state, setState] = useState(initialState);    useEffect(() => {        console.log(state);    });    const handleFieldChange = (field, value) => {        const newState = state;        newState.submitError = null;        newState.touched[field] = true;        newState.values[field] = value;        newState.errors = true; // set to true just for test        setState(newState);    };    const showEmailError = state.errors.email;    return (        <div>        <TextField            className={classes.textField}            label="Email address"            name="email"            onChange={event => handleFieldChange('email', event.target.value)}            type="text"            value={state.email}            variant="outlined"        />        {showEmailError && (            <Typography                className={classes.fieldError}                variant="body2"            >                {state.errors.email[0]}            </Typography>        )}        </div>    )    }我遇到的问题是，在handFieldChange执行时，没有出现电子邮件错误。就好像我没有在我的 return 语句中得到最新的状态变化。我做错了什么？

Answer 1

我在评论中给了你一个提示，但你似乎忽略了它。你不应该直接改变 state 对象，因为当你调用 setState 时，React 会将它与你原始的 state 对象引用进行比较（感谢 Ross 在评论中指出）。由于无论如何您已经对其进行了变异并且 React 没有找到任何更改的属性，因此您的组件不会更新，因此useEffect不会调用 hook。在工作之前创建对状态对象的新引用。您需要执行以下操作：

替换

const newState = state;

与

const newState = { ...state }

Answer 2

setState认为没有任何变化，因为你state每次都传递同一个对象。在每次更新时创建一个新对象：

const newState = { ...state };