如何解决React中条件变量引发的useEffect依赖数组告警问题

解决方法 #

你可以按以下两步操作即可同时解决报错和告警问题： #

1. 提前提取嵌套属性为顶层变量

在useEffect外部，先把嵌套的props值用可选链提取为独立变量，既避免属性不存在时的报错，也能让eslint的依赖检查规则正常识别：

// 组件内部、useEffect外提前取值
const categoryVal = props?.initialValues?.schema?.category;

2. 调整useEffect依赖和请求参数

把提取好的categoryVal加入依赖数组，同时调整请求体的写法，确保值不存在时不会传递category_values字段：

useEffect(() => {
    // clear prev state
    setUniqueValues([]);
    setLoading(true);

    // get unique values and set field values;
    jwtAxios
        .post(`${baseURL}/support/get_unique_values`, {
            field: fieldName,
            catalog_id: catalogID,
            page,
            // 仅当categoryVal存在时才添加该字段
            ...(categoryVal && { category_values: categoryVal })
        })
        .then((data) => {
            setUniqueValues(data.data.unique_values);
            setLoading(false);
            setError(false);
        })
        .catch((err) => {
            console.log(err);
            setError(err);
        });
}, [catalogID, fieldName, page, categoryVal]);

原理解释 #

• eslint的react-hooks/exhaustive-deps规则不支持直接在依赖数组里写嵌套可选链表达式，提取为顶层独立变量后就能被静态检查正常识别，不会再报「复杂表达式」的告警
• 用条件扩展运算符处理请求体，比直接赋值undefined更稳妥，后端不会收到冗余的category_values: undefined字段，完全符合你「有值才传」的需求

可选补充方案 #

如果你确认props?.initialValues?.schema?.category在组件生命周期内永远不会变化，不需要在它更新时重新触发请求，可以用useRef存储该值，就不用把它加入依赖数组：

const categoryVal = useRef(props?.initialValues?.schema?.category).current;

不推荐直接加禁用eslint的注释跳过检查，容易因为遗漏依赖导致业务bug。

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