通过 React 的 useState 挂钩设置状态时删除键的最佳或最有效方法是什么？

Question

我们的项目正在采用新的功能性 React 组件并大量使用各种挂钩，包括 useState。

与 React Class 的 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);
  }

是否有更好的替代方案（更好的是更高效 and/or 标准）？

Answer 1

如果您在通过挂钩设置状态时需要更多控制，请查看 useReducer hook。

这个钩子的行为就像 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 })
  }

通过 React 的 useState 挂钩设置状态时删除键的最佳或最有效方法是什么？

What is the best or most efficient method for removing keys when setting state via React's useState hook?

javascript

ecmascript-6

reactjs

react-hooks