如何正确使用React中的useState钩子

Question

我对在React中使用useState((钩子有点困惑。我想以组件状态存储一些数据，例如表单名称、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);

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

Answer 1

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

Answer 2

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

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

要操作状态，您必须调用这样的函数：

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

希望有帮助。