从 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&nbsp;newState&nbsp;=&nbsp;state;与const&nbsp;newState&nbsp;=&nbsp;{&nbsp;...state&nbsp;}

Answer 2

setState认为没有任何变化，因为你state每次都传递同一个对象。在每次更新时创建一个新对象：const&nbsp;newState&nbsp;=&nbsp;{&nbsp;...state&nbsp;};