React中如何在useEffect钩子中正确使用动态依赖数组？

直接将字符串形式的属性路径作为useEffect依赖是无效的——React会比较依赖数组的值，而字符串本身不会随对应属性的变化而改变，因此钩子无法正确触发。以下是可行的解决方法：

核心思路 #

将字符串路径转换为对应的formData属性值，用这些实际值作为useEffect的依赖，当属性值变化时，依赖数组会更新，从而触发钩子。

1. 实现路径取值工具函数 #

写一个安全的函数，根据字符串路径从对象中提取对应值（替代不安全的eval）：

const getNestedValue = (obj, path) => {
  return path.split('.').reduce((current, key) => current?.[key], obj);
};

2. 生成实际依赖数组 #

结合useMemo缓存依赖数组，避免不必要的渲染：

import { useState, useEffect, useMemo } from 'react';

const YourComponent = () => {
  const [formData, setFormData] = useState({
    name: '',
    age: '',
    place: ''
  });

  // 缓存动态路径数组（若路径来自props/状态，需加入useMemo依赖）
  const receivedDynamicArray = useMemo(() => ['formData.name', 'formData.age'], []);

  // 转换路径为实际属性值，生成依赖数组
  const effectDependencies = useMemo(() => {
    return receivedDynamicArray.map(path => {
      // 移除路径前缀"formData."，提取属性路径
      const propPath = path.replace('formData.', '');
      return getNestedValue(formData, propPath);
    });
  }, [formData, receivedDynamicArray]);

  useEffect(() => {
    // 这里写你的业务逻辑
    console.log('触发钩子：name或age已更新', formData.name, formData.age);
  }, effectDependencies);

  // 示例：更新formData的UI
  return (
    <div>
      <input value={formData.name} onChange={(e) => setFormData(prev => ({...prev, name: e.target.value}))} />
      <input value={formData.age} onChange={(e) => setFormData(prev => ({...prev, age: e.target.value}))} />
    </div>
  );
};

关键说明 #

• useMemo的作用：缓存effectDependencies，只有当formData或receivedDynamicArray变化时才重新生成数组，避免无意义的useEffect触发。
• 路径兼容性：工具函数支持深层嵌套路径（如'formData.address.city'），只需调整replace逻辑或直接传入属性路径（如'address.city'）即可。

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