React JS：向函数传递多个useState setter函数的语法问题

你的核心问题有两个：一是传递action时直接执行了函数（导致组件渲染阶段就触发setState），二是数组展开语法错误（...initialActions这种写法无法触发函数执行）。下面是具体的修正方案：

1. 修正参数传递逻辑 #

不要在useEffect里直接调用action函数（比如specificInitialActionOne()），而是传递函数本身。这样才能让函数在getDataItems的业务流程中执行，而非组件渲染时就提前触发。

2. 正确执行action数组 #

在getDataItems里通过forEach遍历action数组并逐个调用，替代无效的展开语法。同时注意参数名拼写（你代码里的finalactions要改成finalActions，保持大小写一致）。

修正后的完整代码示例 #

// 用useCallback包裹，避免每次渲染创建新函数，防止useEffect重复触发
const getDataItems = useCallback(({ initialActions = [], finalActions = [] }) => {
  setCommonPieceOfState(true);
  
  // 执行所有初始action
  initialActions.forEach(action => action());

  doFetch(someApi())
    .then(parseResponse)
    .then(handleError)
    .then(extractData)
    .catch(errorHandler)
    .finally(() => {
      // 执行所有最终action
      finalActions.forEach(action => action());
      setCommonPieceOfState(false);
    });
}, [setCommonPieceOfState, doFetch, someApi, parseResponse, handleError, extractData, errorHandler]);

useEffect(() => {
  if (somePieceOfState) {
    getDataItems({
      // 传递函数本身，不要加()
      initialActions: [specificInitialActionOne, specificInitialActionTwo],
      finalActions: [specificFinalActionOne]
    });
  }
}, [somePieceOfState, getDataItems]);

useEffect(() => {
  if (someOtherPieceOfState) {
    getDataItems({
      initialActions: [specificInitialActionThree],
      finalActions: [specificFinalActionTwo, specificFinalActionThree, specificFinalActionFour]
    });
  }
}, [someOtherPieceOfState, getDataItems]);

处理带参数的action #

如果你的setter需要传递参数（比如setSomeState('new value')），可以把action定义为匿名函数或包含函数与参数的对象，再在getDataItems里适配执行：

// 调用时传递带参数的action
getDataItems({
  initialActions: [
    // 方式1：匿名函数包裹
    () => specificInitialActionOne('param1'),
    // 方式2：对象形式传递函数和参数
    { fn: specificInitialActionTwo, args: ['param2'] }
  ]
});

// 修改getDataItems里的执行逻辑
initialActions.forEach(action => {
  if (typeof action === 'function') {
    action();
  } else {
    action.fn(...action.args);
  }
});

关键注意事项 #

• 用useCallback包裹getDataItems，并把所有依赖项加入第二个参数数组，避免组件每次渲染都创建新的getDataItems函数，导致useEffect不必要地触发。
• 确保所有传递的action函数（比如specificInitialActionOne）都在useEffect的依赖数组中，或者用useCallback包裹这些action函数，防止闭包导致的状态更新异常。

内容的提问来源于stack exchange，提问作者Phil S