React使用useContext时context值变更后Table组件未重新渲染问题求助

问题根因 #

你遇到的问题核心出在SchoolInfoTable组件的useEffect清理逻辑上：

• useEffect在依赖项context.currentRep变更时，会先执行上一次渲染生成的清理函数，将cancelRequest.current设为true
• 新的useEffect执行时没有重置这个标记位，接口请求返回后，判断cancelRequest.current为true直接跳过了setData(res)的逻辑
• 表格的本地data状态没有更新，自然不会触发重渲染，和useContext本身的触发逻辑无关

修复方案 #

1. 修正请求取消标记的逻辑 #

修改SchoolInfoTable组件内的useEffect，每次执行请求前重置取消标记：

useEffect(() => {
    // 新增：每次新effect执行前重置取消标记
    cancelRequest.current = false;
    const fetchData = async () => {
        const res = await (await fetch(`http://localhost:8080/api/schools${context.currentRep !== "" ? `?account_rep_id=${context.currentRep}` : ""}`)).json()
        if (cancelRequest.current) { return }
        setData(res)
    };
    void fetchData();
    return () => {
        cancelRequest.current = true
    }
}, [context.currentRep]);

2. 优化表格行key值 #

不要使用数组索引作为列表渲染的key，改用数据的唯一标识id，避免React diff算法出现异常导致渲染不更新：

<tbody>
{data.map((obj) => {
        return ( <SchoolInfoTableRow key={obj.id} data={obj}/> )
    })}
</tbody>

3. 修复闭包隐患 #

Sidebar组件内的handleChangeHandler使用useCallback时没有添加context作为依赖，存在闭包陷阱，修改依赖数组：

const handleChangeHandler = useCallback((event: React.FormEvent<HTMLSelectElement>): void => {
    setState(event.currentTarget.value)
    context.setCurrentRep(event.currentTarget.value)
},[context]);

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