如何在 React 中正确使用 useState 钩子？答案

【问题标题】：How to use useState hook in React correctly?如何在 React 中正确使用 useState 钩子？
【发布时间】：2019-11-07 12:07:02
【问题描述】：

我对在 React 中使用 useState() 钩子有点困惑。我想在组件状态中存储一些数据，例如来自表单的值 - name、minValue 和 maxValue。我的代码应该是什么样子？

const [state, setState] = useState({
   name: '',
   minValue: 0,
   maxValue: 9
});

或

const [name, setName] = useState('');
const [minValue, setMinValue] = useState(0);
const [maxValue, setMaxValue] = useState(9);

这些方法中的任何一种更好还是相等？

【问题讨论】：

【解决方案1】：

虽然两者都可以，但我认为第二个更好，因为它更易于阅读和更新。如果您想处理更复杂的对象，请查看useReducer()。

【讨论】：

【解决方案2】：

useState() 返回您当前的状态值和更新此状态值的方法。在那里你可以设置任何类型的对象、数组或字符串等。像这样：

const [someState, setSomeState] = useState('something')

要操纵状态，您必须像这样调用函数：

const someFunction = () => { setSomeState('new state') }

希望有帮助。

【讨论】：