从React钩子读取状态

Question

I have the following code

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>
    )
    }

The problem that I have is that when the handFieldChange is executed, the email error does not appear. It's like I don't get the latest state change in my return statement. What am I doing wrong?

Answer 1

I gave you a hint in comments but it seems like you ignored it. You should not mutate the state object directly as when you call setState, React compares it with your original state object reference (thanks for Ross to point it out in comments). Since you've already mutated it anyway and React doesn't find any changed properties, your component is not updated and hence useEffect hook is not called. Create a new reference to your state object before working. Here's what you need to do:

Replace

const newState = state;

with

const newState = { ...state }

Answer 2

First of all, to store big object, like in this case, use useReducer instead of useState .

By typing const newState = state; you're assigning same object, so you'll work with still same object. Use const newState = {...state} or sth like that.

Lets' look below:

const showEmailError = state.errors.email;
[...]
{state.errors.email[0]}

Your state.errors property is boolean, so it doesn't have any nested objects.

---

In useEffect, you need to pass dependencies array, which will be tracked and call function on any change. To call it only once, pass empty array:

useEffect(() => {
    console.log(state);
}, []);

If u want to log every state changes, pass state as a dependency.

Answer 3

setState thinks that nothing is changing because you're passing it the same state Object every time. Create a new Object on each update:

const newState = { ...state };