Question

我对使用useState进行重新渲染有些疑问。例如，我有五个useState方法：

setFirstState(someValue);
setSecondState(someValueSecond);
setThirdState(someValueThird);
...

为此，我只需要一个带有react钩子的渲染。你能解雇我还是也许举个例子？

Answer 1

您可以将其与useEffect和空部门组合。

import { useState, useEffect } from 'react';
const MyComp = () => {
  const [val, setVal] = useState('initialVal');
  useEffect(() => {
    setVal('newVal');
  }, []);
// --^    - this is an empty dependency list 
  return <div>Hello</div>;
};

Answer 2

您可以将所有这些组合成一个状态。

setCombinedState({
  first: someValue,
  second: someValueSecond,
  third: someValueThird,
});

:)希望能解决您的问题。

Answer 3

您想改用useReducer，并使用具有（第一，第二，第三...）属性的对象来初始化它，然后每次修改所需的对象。

声明您的初始值

const initialState = {
  someValue: 'someValue',
  someValueSecond: 'someValueSecond',
  someValueThird: 'someValueThird',
}

设置

const [val, setVal] = React.useReducer(initalState);

然后在需要时进行修改。

setVal({someValue: 'anotherValue'});
setVal({someValueSecond: 'anotherValue'});
setVal({someValueThird: 'anotherValue'});

Answer 4

通常，当您想同时更改多个状态时，通常意味着这些状态以某种方式是一对。

示例

以这种情况为例：您想从API提取一些数据，因此您将具有以下状态：

const [loading, setLoading] = useState(false)
const [error, setError] = useState(false)
const [data, setData] = useState(undefined)

通常，当其中一种状态发生变化时，其他状态也会发生变化。

很明显，您应该使用useReducer。

例如，像这样：

const reducer = (state, action) => {
  switch (action.type) {
    case 'error':
      return {error: action.payload.error, loading: false };
    case 'fetched':
      return {data: action.payload.data, loading: false };
    case 'loading':
      return {loading: true};
    default:
      throw new Error();
  }
}

然后，您可以创建一个自定义钩子来管理这些状态：

const {loading, error, data, dispatch} = useFetchingData()

总结

这只是一个例子，但是我建议您看一下您的案子，看看您正在谈论的这些状态是否以某种方式联系在一起，并且可以通过这种方式更好地安排。

减速器需要更多我在这里发布的代码。我刚刚编写了reducer函数。如果您想进一步了解它们的工作原理，建议您read the docs。

如果您想使用当前遇到的实际情况更新问题，我可以为您提供进一步的帮助。

我如何只为一个渲染器更新几个useState？

4 个答案: