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

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

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

更新我调用的状态

现在用React钩子初始化状态，如下所示

更新我调用的状态

但是，依我看，这并不理想。我必须重写const[x，setX]=useState。。。；每次我想向状态对象添加一个新的键/值对时。样板。我还必须记住setter的名称x，也就是setX。如果State对象增长，这将变得混乱

如果我能打个电话就好了

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

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

使用对象作为初始值

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

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

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

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

这种类型的设置将解构以前的值，并用旧值替换新值

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

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

注意更新变量

如果您只是使用{first:'new foobar'}更新它，并且在属性中不包含第二个，那么可能会丢失旧的second值。因此，使用…示例将旧值设为second。

使用object作为初始值

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

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

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

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

这种类型的设置将解构以前的值，并用旧值替换新值

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

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

注意更新变量

---

如果您只是使用{first:'new foobar'}更新它，并且在属性中不包含第二个，那么可能会丢失旧的second值。因此，使用…示例将旧值设为second。

您可以制作自己的钩子来完成此操作

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

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

    return {
        first,
        second,
        setState,
    }
}

---

你可以根据自己的需要进行调整，但如果你想知道如何做，你可以自己做一个钩子

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

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

    return {
        first,
        second,
        setState,
    }
}

---

您可以根据自己的需要对其进行调整，但如果需要，您应该知道如何进行调整。

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

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

然后更新状态-

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

---

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

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

然后更新状态-

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

从React docs：当您有涉及多个子值的复杂状态逻辑或下一个状态依赖于前一个状态时，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>
    </>
  );
}

从React docs：当您有涉及多个子值的复杂状态逻辑或下一个状态依赖于前一个状态时，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>
    </>
  );
}

---

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

---

代码：

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

---

代码：

这是更多的样板，开销，错误加载。这是更多的样板，开销，错误加载。如果你不这样设置所有状态，请不要忘记传播状态。Old this.setState更新相关属性，并将更改的属性与状态合并，但使用挂钩时，状态始终被覆盖。如果不这样设置所有状态，请不要忘记传播状态。旧this.setState更新相关属性，并将更改的属性与状态合并，但使用挂钩，状态总是被覆盖。对于这样一件简单的事情来说，模板太多了