通過React的useState鈎子設置狀態時，刪除鍵的最佳或最有效方法是什么？

Question

我們的項目正在擁抱新的功能性React組件，並大量使用了各種鈎子，包括useState 。

與React類的setState()方法不同，useState（）返回的setter完全替換了狀態，而不是合並 。

當狀態是地圖並且我需要刪除鍵時，我克隆現有狀態，刪除鍵，然后設置新狀態（如下所示）

[errors, setErrors] = useState({})
...
const onChange = (id, validate) => {
  const result = validate(val);
  if (!result.valid) {
    setErrors({
      ...errors,
      [fieldId]: result.message
    })
  }
  else {
    const newErrors = {...errors};
    delete newErrors[id];
    setErrors(newErrors);
  }

有沒有更好的選擇（更好的效率和/或標准）？

Answer 1

如果通過掛鈎設置狀態時需要更多控制，請查看useReducer掛鈎 。

這個鈎子的行為就像redux中的reducer一樣-一個接收當前狀態和一個動作的函數，並根據該動作轉換當前狀態以創建一個新狀態。

示例（未經測試）：

const reducer = (state, { type, payload }) => {
  switch(type) {
    case 'addError':
      return { ...state, ...payload };
    case 'removeError':
      const { [payload.id]: _, ...newState };
      return newState;
    default:
      return state;
  }
};

const [state, dispatch] = useReducer(reducer, {});
...
const onChange = (id, validate) => {
  const result = validate(val);
  if (!result.valid) {
    dispatch({ type: 'addError', payload: { [id]: result.message }})
  }
  else {
    dispatch({ type: 'removeError', payload: id })
  }