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

Question

我想知道最好的方法是在Functional Component 中为state 定义多个key/value 对。

在课堂上我会像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';

但是，恕我直言，这并不理想。每次我想向State object 添加一个新的key/value 对时，我都必须重写const [x, setX] = useState(...);。样板。我还必须始终牢记x 的“setter”名称，即setX。如果State object 增长，那将变得一团糟。

如果我能简单地打电话就更好了

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

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

Answer 1

使用对象作为初始值

您可以使用javascript object 作为您的值。 通过这种方式，您可以将更多变量放在您的对象和一个地方。 所以你的代码如下：

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

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

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

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

使用此对象，您只需将新的property 添加到example 的初始化以及您需要设置它的位置。

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

React Hooks useState() with Object

---

注意（更新变量）

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

Answer 2

你可以自己做一个钩子来做这个！

function useMultipleStates() {
    const [first setFirst] = useState('foo');
    const [second, setSecond] = useState('bar');

    const setState = (f, s) => {
        setFirst(f);
        setSecond(s);
    }

    return {
        first,
        second,
        setState,
    }
}

您可以根据自己的需要进行调整，但如果应该让您知道如何做到这一点。

Answer 3

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

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

然后更新状态 -

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

Answer 4

来自 React 文档：当您有涉及多个子值的复杂状态逻辑或下一个状态取决于前一个状态时，useReducer 通常比useState 更可取。 useReducer 还允许您优化触发深度更新的组件的性能，因为您可以向下传递调度而不是回调。

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

function reducer(state, action) {
  switch (action.type) {
    case 'doFirst':
      return {...state, first: 'newFirst' };
    case 'doSecond':
      return {...state, second: 'newSecond' };
    default:
      throw new Error();
  }
}

function Component() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      {state.first}
      {state.second}
      <button onClick={() => dispatch({type: 'doFirst'})}></button>
      <button onClick={() => dispatch({type: 'doSecond'})}></button>
    </>
  );
}

Answer 5

我建议使用减速器挂钩。 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