Reactjs useEffect缺少依赖项

我想在钩子中实现

componentDidMount

，我只想为第一次渲染做一些事情，因此在

useffect

中，我将依赖项数组设置为空，但eslint发出了缺少依赖项的警告。 如何解决

import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";

const Child = ({ age }) => {
  useEffect(() => {
    console.log("simulate componentDidMount, age:", age);
  }, []);

  useEffect(() => {
    console.log('simulate componentDidUpdate, age:', age)
  }, [age])

  return <div>age: {age}</div>;
};

const App = () => {
  const [age, setAge] = useState(0);
  const handleOnClick = e => {
    e.preventDefault();
    setAge(a => a + 1);
  };
  return (
    <>
      <Child age={age} />
      <button onClick={handleOnClick}>INCREASE AGE</button>
    </>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

import React，{useffect，useState}来自“React”；
从“react dom”导入react dom；
常量Child=（{age}）=>{
useffect（（）=>{
log（“simulate componentDidMount，age:，age”）；
}, []);
useffect（（）=>{
log（'simulate componentDidUpdate，年龄：'，年龄）
}[年龄]）
返回年龄：{age}；
};
常量应用=（）=>{
const[age，setAge]=useState（0）；
const handleOnClick=e=>{
e、 预防默认值（）；
设定值（a=>a+1）；
};
返回(
增龄
);
};
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

它说缺少依赖项，因为您确实在

useffect

中使用了

age

，即使只是为了打印出来，所以

eslint

可能认为您应该添加

age

做依赖项列表

useEffect(() => {
    console.log("simulate componentDidMount, age:", age); //age is being used here
  }, []);

---

React不在乎你如何使用状态。因此，打印年龄与将年龄放在一些逻辑计算中没有区别。埃斯林特做得对

如果不想禁用eslint，可以执行以下操作：

const [component_mounted, set_component_mounted] = useState(false)

useEffect(() => {
    if(!component_mounted) {
      // Use age here
      set_component_mounted(true)
    }
  }, [age, component_mounted, set_component_mounted])

---

您可以将第一个渲染存储在ref中，并在

isFirstRender时执行您需要执行的操作。current

是真的，这样您就不需要添加任何内容，只需添加

age

即可，并且可以将cDM和cDU组合在一起，将生命周期存储在状态对我来说没有意义

constchild=（{age}）=>{
const isFirstRender=useRef（true）；
useffect（（）=>{
if（isFirstRender.current）{
isFirstRender.current=false；
log（“simulate componentDidMount，age:，age”）；
返回
}
log（'simulate componentDidUpdate，年龄：'，年龄）；
}，[年龄]；
返回年龄：{age}；
};

如果要重用它，还可以将其提取到自定义挂钩中

const useIsFirstRender=（）=>{
const isFirstRender=useRef（true）；
useffect（（）=>{
isFirstRender.current=false；
}, []);
返回isFirstRender.current；
};
常量Child=（{age}）=>{
const isFirstRender=useIsFirstRender（）；
useffect（（）=>{
如果（isFirstRender）{
log（“simulate componentDidMount，age:，age”）；
返回；
}
log（'simulate componentDidUpdate，年龄：'，年龄）
}，[年龄，isFirstRender]；
返回年龄：{age}；
};

如果我将

age

添加到依赖项中，稍后当更新

age

时，将再次调用

useffect

中的函数。我想实现类似于

componentDidMount

的功能，只有在我理解后才会调用它，但是如果您想在保持componentDidMount的同时打印出useEffect中的年龄，你必须忽略警告。如果是第一次渲染，你认为是否最好由一个本地状态来记录？@huani-最好由本地状态来记录第一次渲染，我认为不太复杂。您比eslint更了解代码的用途，只需抑制警告即可。我使用

}，[]）；//eslint总是禁用行

。你不明白我的意思。我想实现

componentDidMount

而不使用eslint警告一点以获得正确的代码，但这有多吵？（与林廷评论相比）