设置状态后如何调度

Question

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

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

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

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

Answer 1

如果您想在state更改时(使用新值(调度操作，您可能需要使用useEffect:

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

Answer 2

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

目标是设置State，然后调用以previousState为参数的函数。为了做到这一点，让我们编写一个自定义钩子来封装该目标。

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

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

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

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

回调完成后，我们清除回调列表，并将currentState保存到previousState参考

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} />;
};