React中如何写仅执行一次的useEffect且满足react-hooks/exhaustive-deps规则？

方案1：使用useRef存储初始trackingObject（符合eslint校验规则） #

你之前使用useRef出现空值大概率是赋值时机不对，正确用法是在组件顶层初始化时就把首次传入的props.trackingObject存入ref，后续props变更不会更新ref的值：

export default function Component(props){
  // 组件首次渲染时存入初始值，仅执行一次
  const initialTracking = React.useRef(props.trackingObject);

  React.useEffect(()=>{
    const _updateSession = async () => {
      const tracking = initialTracking.current;
      // 原有业务逻辑完全不变
      const formData = new URLSearchParams();
      formData.append('trackingCode', tracking.trackingCode);
      formData.append('sessionCode', tracking.sessionCode);
      formData.append('content', trackingStage);

      try {
        const req = await fetch(`https://example.com/tracking/${tracking.id}/`, {
          method: 'PUT',
          body: formData,
        })
        const res = await req.json();

        switch (req.status) {
          case 200:
            props.setQuestion('trackingObject', res);
            break
        }

      } catch (err) {
        console.log(err)
      }
    }
    _updateSession()
  },[]) // 空依赖仅执行一次，eslint无告警，因为effect内部仅使用了稳定的ref对象

  return (
  <>
    {/* 其他渲染逻辑 */}
  </>)
}

方案2：显式跳过eslint规则校验（官方认可的合法处理方式） #

如果你明确确认该effect不需要响应任何依赖变化、仅需执行一次，可以直接加注释跳过当前行的规则校验：

React.useEffect(()=>{
  // 原有业务逻辑完全不变
},[]) // eslint-disable-line react-hooks/exhaustive-deps

两种方案都可以实现需求，方案1完全遵循eslint规则，方案2更简洁，适用于你明确知道不需要响应依赖变化的场景。

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