React - useReducer and useState

Question

我开始在一个新项目中实现reducer模式，我想知道useReducer钩子与async immutability具有与useState钩子相同的问题。

我的意思是：

const [state, setState] = useState('');
const handleChange = e => {
setState(e.target.value);
// It doesn't give the current value, it gives the previous one, which is ''
console.log(state);
// So i need to set the current value in a variable to avoid the async immutability
const currentValue = e.target.value;
console.log(currentValue);
e.stopPropagation();
}
<input type='text' value={state} onChange={handleChange}>PRESS</button>

对于useReducer挂钩，我需要做同样的事情：在variable中设置当前change？

Answer 1

无论使用useState还是useReducer，您都将在下一个渲染周期中看到更新的值。

这不是一个缺陷，而是一个设计。如果要使用更新后的值执行某些操作，请使用useEffect，它会在每次渲染后运行。

因此，它将具有新的价值。

Answer 2

问题已解决

为了避免useReducer的挂钩不变性，我们需要在variable中设置current value。然后访问该变量。

const initialState = {
value: ''
};
const [state, dispatch] = useReducer(SomeReducerFunction, initialState);
const handleChange = e => {
dispatch({type: SOME_ACTION_TYPE, payload: e.target.value });
const currentValue = e.target.value;
console.log(currentValue);
e.stopPropagation();
}
<input type='text' value={state} onChange={handleChange}>PRESS</button>