在使用 useState 钩子时仅更新部分状态并保持其他状态不变

Question

您好，我可以执行以下操作来仅更新状态的一部分并保持其他状态不变吗？

const stuff ={ 'a':'alpha', 'b':'alpha' };
const [letter,setLetter]=useState(stuff);
// update
// can i do it this way?
setLetter(...letter,'a':'omega');
// will this result in:
// letter==={'a':'omega', 'b':'alpha'}

Answer 1

这是一个我喜欢用于这种情况的自定义钩子。我称之为useLegacyState()，因为这模仿了旧类组件状态的行为：

const useLegacyState = initialState => useReducer(
(state, update) => ({ ...state, ...update }),
initialState
);
// usage
const [letter, setLetter] = useLegacyState(stuff);
// update
setLetter({ a: 'omega' });
// will result in: { a: 'omega', b: 'alpha' }