setstate后如何调度答案

【问题标题】：How to dispatch after setstatesetstate后如何调度
【发布时间】：2021-09-29 03:26:09
【问题描述】：

我想调度一个依赖于功能组件中先前设置的状态的操作。我有哪些选择？

<Buton 
  onPress={() => {
  setState(state + 1);
  dispatch(myAction(state));
        }}
/>

编辑：为清楚起见，我的意思是调度状态取决于先前设置的状态。在伪代码中：

async () => {
   await setState(state + 1);
   dispatch(myAction(state));
}

【问题讨论】：

您所拥有的一切都可以正常工作。 state 在该上下文中是以前的状态。
请注意，setState 不会返回 promise，因此使用 await 只会创建竞争条件。

标签： javascript reactjs react-redux react-functional-component

【解决方案1】：

如果你想在state 改变时调度一个动作（使用新值），你可能想使用useEffect：

useEffect(() => {
    dispatch(myAction(state))
}, [state])

<Buton 
    onPress={() => {
        setState(state + 1);
    }}
/>

【讨论】：

【解决方案2】：

编辑：用更好的方法更新我的答案。

目标是setState，然后调用一个以previousState为参数的函数。为此，让我们编写一个自定义挂钩来封装该目标。

我们的自定义钩子将初始化一个 useState 钩子，并返回状态，以及一个自定义包装的 setState 方法。

当使用回调参数调用自定义 setState 方法时，我们会将回调推送到数组中并将其保存到 ref。

接下来我们编写一个 useEffect 钩子，它将在 React 完成提交任何状态更改后调用。

在我们的 useEffect 挂钩中，我们将调用 ref 列表中的每个回调，并传递 previousState 和 nextState 作为参数。

回调完成后，我们清空回调列表并将currentState保存到previousState ref。

useStateWithCallback.js

import React, { useState, useRef, useEffect } from 'react';

export const useStateWithCallback = (initialState) => {
  const [state, setState] = useState(initialState);

  const previousState = useRef(initialState);
  const myCallbacksList = useRef([]);

  const setStateWithCallback = (state, callback) => {
    setState(state);
    if (callback) {
      myCallbackList.current.push(callback);
    }
  };

  useEffect(() => {
    myCallbacksList.current.forEach((callback) => callback(previousState.current, state));
    myCallbacksList.current = [];
    previousState.current = state;
  }, [state]);

  return [state, setStateWithCallback];
};

import React from 'react';
import { useStateWithCallback } from './useStateWithCallback';

const Example = (props) => {
  const [state, setState] = useStateWithCallback();

  const handlePress = () => {
    setState(
      (prevState) => prevState + 1,
      (prevState, currentState) => dispatch(myaction(prevState))
    );
  };

  return <Buton onPress={handlePress} />;
};

【讨论】：

@EmileBergeron 我已经用更好的方法更新了我的答案。