reactjs - 如何在useEffect hook中正确实现一个props回调函数

Question

我想使用 useEffect()检测状态值的变化，并使用作为 Prop 接收的回调函数将该值传递给父组件。如果不禁用 eslint 缺少依赖项警告，我想不出办法做到这一点。我在子组件和那个 child 的 child 上都有这个问题。
这是父实现:

const updateValues = (newValues) => {
  setValues({ ...values, ...newValues });
};

<GeneralUpdates onUpdate={updateValues} />

这是第一个 child (GeneralUpdates):

const [values, setValues] = useState({
    name: '',
    description: '',
  });

// This handles form input changes
const handleChange = (prop) => (event) => {
  setValues({ ...values, [prop]: event.target.value });
};

useEffect(() => {
  onUpdate(values);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [values]);

<FilesUpload handleChange={onUpdate}/>

这是 child 的 child (FilesUpload):

const [featuredPhotos, setFeaturedPhotos] = useState([]);

useEffect(() => {
  handleChange({ featuredPhotos });
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [featuredPhotos]);

添加 handleChange作为依赖项会导致无限的重新渲染循环。我已经尝试了所有我能找到的解决方案，但这里肯定遗漏了一些东西。

Answer 1

一位同事帮我找到了解决方案——将命名函数传递给 useEffect 而不是匿名函数:

const updateCallback = () => {
    onUpdate(values);
  };

useEffect(updateCallback, [values]);