setstate后如何调度

Posted 2023-03-16

【中文标题】setstate后如何调度

【英文标题】：How to dispatch after setstate

【发布时间】：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 只会创建竞争条件。

【参考方案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 我已经用更好的方法更新了我的答案。