React子组件向上传递状态时同步触发额外函数的实现疑问

问题根因 #

你写的setFilteredCases={setFilteredCases, foo}用到了JavaScript的逗号表达式规则：逗号分隔的多个表达式会依次执行，最终返回最后一个表达式的结果。所以你实际传给子组件的setFilteredCases属性是foo函数，而非原本的状态更新函数，自然状态更新失效，逻辑也无法按预期执行。

正确实现方案 #

根据你的foo函数是否需要依赖更新后的filteredCases值，可以选择两种实现方式：

方案1：foo不需要使用最新的filteredCases #

直接在父组件封装一个统一的处理函数，把状态更新和foo调用逻辑整合后传给子组件即可，子组件无需做任何修改：

const [filteredCases, setFilteredCases] = useState([]);

function foo() {
  // 原有逻辑
}

const handleFilterUpdate = (newCases) => {
  setFilteredCases(newCases);
  foo();
}

<ChildComponent
  setFilteredCases={handleFilterUpdate}
/>

方案2：foo需要使用更新后的filteredCases #

由于React的状态更新是异步的，直接在setFilteredCases调用后读取filteredCases拿到的还是旧值，这种场景可以用useEffect监听filteredCases的变化，状态更新完成后自动触发foo：

import { useEffect } from 'react';

const [filteredCases, setFilteredCases] = useState([]);

function foo(updatedCases) {
  // 可以拿到最新的filteredCases做处理
}

// 依赖项为filteredCases，值变化时自动执行回调
useEffect(() => {
  foo(filteredCases);
}, [filteredCases])

<ChildComponent
  setFilteredCases={setFilteredCases}
/>

内容的提问来源于stack exchange，提问作者Neil Kelsey