React(Next.js)自定义hook内点击事件无法修改父组件状态如何解决？

问题核心原因 #

你当前父组件和子组件分别定义了完全独立的industrySelected状态，两者互不关联。子组件点击事件修改的是自身内部的状态，父组件的状态完全没有收到更新通知，所以下方的筛选列表不会触发重新渲染。

解决步骤 #

1. 修改父组件（Industries页面） #

给Table组件传递父组件的状态更新方法setIndustrySelected，将父组件渲染Table的代码调整为：

<Table data={array} onIndustrySelect={setIndustrySelected} />

2. 修改子组件（useTable.js） #

删除子组件内部自己定义的industrySelected相关useState代码，点击时直接调用父组件传过来的更新方法即可，调整后的子组件核心代码如下：

const Table = (props) => {
    const { items, requestSort, sortConfig } = useSortableData(props.data);
    // 删掉原有子组件内部的状态定义行
    // const [industrySelected, setIndustrySelected] = useState("");

    const getClassNamesFor = (name) => {
        if (!sortConfig) return;
        return sortConfig.key === name ? sortConfig.direction : undefined;
    };
    return (
        <div>
            <table>
                <thead>
                    ...
                </thead>
                <tbody>
                    {items.map((item) => (
                        <tr key={item[0]}>
                            <td>
                                <a
                                    href="#list"
                                    onClick={() => {
                                        // 调用父组件传入的更新方法同步状态
                                        props.onIndustrySelect(item[0]);
                                    }}
                                >
                                    {item[0]}
                                </a>
                            </td>
                            <td>{item[1]}</td>
                        </tr>
                    ))}
                </tbody>
            </table>
        </div>
    );
};

可选优化 #

如果需要在子组件中使用选中的行业值做高亮等样式处理，可以同时把父组件的industrySelected状态也传递给子组件：

// 父组件传值
<Table 
  data={array} 
  industrySelected={industrySelected} 
  onIndustrySelect={setIndustrySelected} 
/>

子组件直接通过props.industrySelected读取值即可，不需要再单独维护内部状态。

单文件合并逻辑注意点 #

如果把两边逻辑合并到同一个文件，直接删除重复的状态定义，共用父组件声明的industrySelected和setIndustrySelected即可，不要重复定义相同用途的状态。

内容的提问来源于stack exchange，提问作者Lil Robots