在React Hooks中有设置状态的通用方法吗？

小编典典

在React Hooks中有设置状态的通用方法吗？

reactjs

我有一个问题，是否可以在React Hooks中使用通用的“ useState”，就像我可以在React Components中这样做一样？

在React Components中，我可以这样做：

handleChange(event) {
  const {name, value} = event.target
  this.setState({
    [name]: value
  })    
}

在React Hooks中甚至有可能实现？

阅读 311

2020-07-22

共1个答案

小编典典

是的，使用挂钩可以通过三种方式管理复杂的状态（无需第三方库）：

管理具有多个状态的单个对象。
useReducer如果（1）太复杂，请使用。
useState对每个键值对使用多个（考虑其可读性和维护性）。

看看这个例子：

const [statesManager, setStatesManager] = useState(complexStateInitial);

const [state, dispatch] = useReducer(reducer, complexStateInitial);

const onChangeUseState = e => {
  const { name, value } = e.target;
  setStatesManager(prevState => ({ ...prevState, [name]: value }));
};

const onChangeUseReducer = e => {
  const { name, value } = e.target;
  dispatch({ type: name, value });
};

笔记

为了简化起见，有一个代码重复。
与setState类组件中的方法不同，useState它不会自动合并更新对象。您可以通过将函数更新程序形式与对象传播语法结合使用来复制此行为：

    setState(prevState => {
      // Object.assign would also work
      return {...prevState, ...updatedValues};
    });

参考React Docs

2020-07-22