reactjs - React 无限循环调度，来自 useReducer 钩子(Hook)

Question

该组件的主要逻辑是，当页面加载时，需要从 URL(token)中保存参数，并从 dispatch() 中传递。功能。为此，我有一个状态值最初存储为 null，但在渲染组件后我添加了一个 token 。
组件.js

const [state, dispatch] = useReducer()
const [value, setValue] = useState(null)

  useEffect(() => {
    const query = window.location.search || ''
    const queryString = new URLSearchParams(query || '')
    const token = queryString.get('token')
    setValue(token)
  }, [value])

   useEffect(() => {
    if (value && value !== null) {
      // console.log(1)
      dispatch({
        type: 'TEST_TYPE',
        payload: { data: value },
      })
    }
  }, [value])

当我想调用 dispatch() useEffect()中的函数组件被重新加载，直到内存已满。我测试了第二种方法，称为 dispatch()函数到 useCallback()如果有新的变化，调用一次。但是 dispatch未调用函数

const dis = useCallback(() => dispatch, [])

  useEffect(() => {
    const query = window.location.search || ''
    const queryString = new URLSearchParams(query || '')
    const token = queryString.get('token')
    if (token) {
      dis({
         type: 'TEST_TYPE',
         payload: { data: token },
      })
    }
  }, [dis])

如何正确制作 dispatch加载组件并且没有无限循环时工作一次？

Answer 1

就像 Rostyslav 说的，你没有使用 useReducer以正确的方式。这与 useState 不同。钩子(Hook):在那一个中​​，它接收到的参数将作为组件状态中已定义变量的默认值，这就是为什么可以将其留空的原因。当你要修改它的内容时，你只需要使用钩子(Hook)返回的setter函数来更新它的值。
但是，useReducer要求您明确定义数据将根据您选择的某些操作而更改的方式。此方法必须至少接收两个参数:reducer 函数和一个初始状态，该初始状态将是即将进行的数据转换的起点。
reducer 函数的目的是响应调度的 Action 对状态进行更改。 此方法将接收当前状态和一个操作对象(这是您通过 dispatch 发送的值)。根据接收到的操作，reducer 方法必须在数据中应用一些转换并返回一个将覆盖当前状态的新对象。
以下代码说明了适用于您的情况的 reducer 。默认情况下，token state 的属性将设置为 null .正如您在 reducer 的代码中看到的那样，当类型为 UPDATE_TOKEN 的操作时被触发，token您所在州的属性将更新为包含 token捆绑到操作有效负载中。

const initialState = {
  token: null
};

const reducer = (state, action) => {
  switch (action.type) {
    case "UPDATE_TOKEN":
      return {
        ...state,
        token: action.payload.token
      };
    default:
      return state;
  }
};

由于您将存储 token通过 dispatch 一个 action 进入 store，你不需要使用 useState将其保存到 value事先属性(property)。 如果您需要从组件中的任何位置访问 token ，您可以直接从您的 appState 中检索它。变量，如下面的代码:

const App = () => {
  const [appState, dispatch] = useReducer(reducer, initialState);

  useEffect(() => {
    const query = window.location.search || "";
    const queryString = new URLSearchParams(query || "");
    const token = queryString.get("token");

    if (token) {
      dispatch({
        type: "UPDATE_TOKEN",
        payload: { token }
      });
    }
  }, []);

  return <div className="value">Token: {appState.token}</div>;
};

完整的工作示例可以在 here 中找到。 .
即使这应该可行，但您可能需要重新考虑是否真的需要 useReducer或不。 添加 reducer 和操作会增加代码的复杂性，因此它仅适用于需要更多逻辑来更新它们的较大数据结构。 在这个特定的例子中，这似乎不值得付出努力，因为您需要执行的唯一操作就是更改 token 的值。变量:由于这个变量只是一个字符串，这可以很容易地通过使用 useState来实现.