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

Question

我想知道定义多个 key/value 的最佳方法是什么？配对 state在 Functional 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正确/最好的方法是什么。

Answer 1

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

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

然后更新状态 -

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