Question

我根据状态使用useCallback定义了一个函数。我想从另一个调用此函数，该函数会在调用它之前更改状态，并使用useCallback进行定义。我该怎么办？

示例：

show

这里，当调用onChangeText时，它将更新状态和are-expanded="false"的定义，但不会使用我定义的新状态调用const refreshPage = useCallback( () => { if (state == '1') // action }, [state] ); const onChangeText = useCallback( (state) => { setState(state); refreshPage(); }, [refreshPage] );。

我精确地说，这只是一个例子，我使用useEffect加载数据。

谢谢！

Answer 1

当state更改且state等于1时，您想执行一些操作，最好在useEffect中处理，而不要在useCallback中处理，而无需调用像refreshPage之类的东西

const refreshPage = useCallback(() => {
   // load data here
},[]);

useEffect(() => {
  if (state == '1'){
    refreshPage()
  }
},[state]);

const onChangeText = useCallback((state) => {
     setState(state);
 },[]);

Answer 2

之所以不能以更新状态调用它，是因为useCallback将在组件重新渲染时以及在调用setState(state)和refreshPage()时更新函数的值，该组件尚未重新渲染，并且仍在使用尚未更新的refreshPage。

完成此工作的一种方法是将状态传递到refreshPage并在其中使用，而不是中继将在state上更改的useCallback。

const refreshPage = useCallback(
    // added state here 
    (state) => {
        if (state == '1')
            // action
    },
    [] // removed state  from here
);

const onChangeText = useCallback(
    (state) => {
        setState(state);
        refreshPage(state);
    },
    [refreshPage]
);

设置依赖状态后使用useCallback定义的调用函数

2 个答案: