如何在 useEffect 中使用 prop 值而不将其添加到依赖数组中？答案

【问题标题】：How to use the prop value inside a useEffect without adding it to the dependency array?如何在 useEffect 中使用 prop 值而不将其添加到依赖数组中？
【发布时间】：2022-08-14 01:17:56
【问题描述】：

我有这样的场景。消息和关卡都来自道具。但我只需要在消息值更改和message=== \'data\' 时记录级别，而不是在level 更改时记录级别。我怎样才能做到这一点？我像这样实现了 useEffect 钩子。但它给了我这个 eslint 警告React Hook useEffect has a missing dependency: \'level\'. Either include it or remove the dependency array。 .那么，解决这个问题的最佳方法是什么？

useEffect(() => {
    if (message === \'data\') {
        console.log(\'level : \', level);
    }
}, [message]);

您可以将代码添加到实时编辑器吗？

标签： reactjs react-hooks use-effect

【解决方案1】：

您可以使用 useRef 钩子来防止警告

  const levelRef = useRef('');

  useEffect(() => {
    levelRef.current = level;
  }, [level]);

  useEffect(() => {
    if (message === 'data') {
      console.log(levelRef.current);
    }
  }, [message]);

或禁用此行中的 eslint

   useEffect(() => {
       if (message === 'data') {
           console.log(level);
       }
   }, [message]); // eslint-disable-line react-hooks/exhaustive-deps

【讨论】：