时间戳

首页 > 解决方案 > 在状态对象中使用具有多个键/值对的 React Hooks

javascript - 在状态对象中使用具有多个键/值对的 React Hooks

问题描述

我想知道最好的方法是为in a定义不止一key/value对。stateFunctional Component

在课堂上我会State像这样

this.state = {
    first: 'foo',
    second: 'bar'
};

更新State我的电话

this.setState({
    first: 'foobar'
    second: 'barfoo'
});

现在React Hooks我像这样初始化State。

const [first setfirst] = useState('foo');
const [second, setSecond] = useState('bar');

更新State我的电话

setFirst = 'foobar';
setSecond = 'barfoo';

但是，恕我直言，这并不理想。每次我const [x, setX] = useState(...);想key/value在State object. 样板。我还必须始终牢记 的“setter”名称x，即setX. 如果增长，那将变得混乱State object。

如果我可以简单地打电话会更好

setState(first: 'foobar', second: 'barfoo');

但我不确定如何State object正确初始化/最好的方法是什么。

标签： javascriptreactjs

解决方案

您可以使用 useState 设置整个对象，如下所示 -

const [stateObj, setStateObj] = useState({first:'foobar', second:'barfoo'});

然后更新状态 -

setStateObj({first:'foobarnew', second:'barfoonew'})

推荐阅读