在状态对象中对多个键/值对使用React钩子

Question

我想知道在功能组件中为状态定义多个键/值对的最佳方法是什么。

在一个类中，我会初始化状态

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（…）每次我想向状态对象添加新的键/值对时。样板。我还必须记住x的“setter”名称，即setX。如果状态对象增长，则会变得混乱。

如果我能打个电话就好了

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

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




Answer 1

我建议买减速机挂钩。React官方网站说，若你们有复杂的状态，那个就选择userReducer钩子。

const initialState = {
first: 'foo',
second: 'bar'
};

function reducer(state, action) {
  switch (action.type) {
    case 'updateFirst':
      return {...state, first: 'fooBar' };
    case 'updateSecond':
      return {...state, second: 'barfoo' };
    case 'updateBoth':
      return {...state, second: 'barfoo',first: 'fooBar' };
    default:
      throw new Error();
  }
}

function Component() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      {state.first}
      {state.second}
      <button onClick={() => dispatch({type: 'updateFirst'})}>UpdateFirst</button>
      <button onClick={() => dispatch({type: 'updateSecond'})}>UpdateSecond</button>
      <button onClick={() => dispatch({type: 'updateBoth'})}>UpdateBoth</button>
    </>
  );
}

代码：https://codesandbox.io/s/busy-rosalind-9oiow

Answer 2

使用对象作为初始值

您可以使用javascript对象作为您的值。通过这种方式，您可以在对象和一个位置放置更多变量。因此，您的代码如下所示：

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

然后你可以像这样更新它：

setExample({...example,first:'new foobar'})
setExample({...example,second:'new foobar second'})

这种类型的设置正在解构您以前的值，并用旧值替换您的新值。

使用此对象，您只需将新的属性添加到示例的初始化和需要设置它的位置。

作为一个复杂的示例，您可以访问以下链接：

用对象反应钩子useState（）

通知（更新变量）

如果您只是使用{first：'new fobar'}更新它，并且在属性中不包括第二，您可能会丢失第二的旧值。所以使用...例子来获得旧的值第二个。

Answer 3

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

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

然后更新状态-

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