reactjs挂钩中的连续状态对象设置问题

Question

I am starting to using react hooks and i decide to put an object instead of a variable in the useState function :

const [foo, setFoo] = useState({
    term: '',
    loading: false,
    ...
});

but later when I want to update it

const onChange = (e) => { 

    const { value } = e.target;

    setFoo({ ...foo, term: value });

    if(value) setFoo({ ...foo, loading: true });

    ...

}

...

return (
   ...
   <input onChange={onChange} value={term} />
   ...
) 

1. Why in the second setFoo when I check the foo object I get alway term property equal to '' exactly like the initial value and the input don't get updated with the typed characters ?

- When I delete the second setFoo it works so I guess because setFoo is asynchronous but how to solve this issue ?.

- I know that we can workaround this issue by managing to call setFoo just once but i want to know other solutions ?

2. Why this kinda of issues never happened in redux ?

Answer 1

The solution: use one setFoo like this:

const onChange = (e) => { 

    const { value } = e.target;

    setFoo({ term: value, loading: !!value });

    ...

}

!! means "convert to boolean value".

Answer 2

You can solve the issue by calling setFoo only once with all the new key-value pairs, like this:

const onChange = (e) => { 

    const { value } = e.target;
    const loading = value ? true : false;
    setFoo({ ...state, term: value, loading });
    ....
}

Update:

For complex state update and more control on that part, you can use useReducer , and write a separate reducer to update the state.

Answer 3

1. Probably because you have to destruct foo instead of state

setFoo({ ...foo, term: value });

working useState example

2. Take a look at the additional hooks, especially useReducer

useReducer is usually preferable to useState when you have complex state logic that involves multiple sub-values or when the next state depends on the previous one.

And your code can become:

const reducer = (state, action) {
    switch(action.type) {
       case 'loading':
         return { ...state, loading: true };
       case 'loaded':
       default:
         return { ...state, loading: false };
    }
}

const initialState = {
  term: '',
  loading: false,
}
const [state, dispatch] = useReducer(reducer, initialState);
dispatch({
   type: e.target.value ? 'loaded' : 'loading'
});

working useReducer example on CodeSandbox