如何禁止掉落有效的useEffect实例？

Question

这是有效的alt.css代码：

useEffect

关于依赖项，我非常希望它在加载时仅运行一次，因此 useEffect(() => { if (state.companyId !== undefined && state.companyId === -1) { return; } if (accessNotesRef.current) { accessNotesRef.current.focus(); } if (vinRef.current) { vinRef.current.focus(); } }, []); 。但是小子抱怨：

  

React Hook useEffect缺少依赖项：'emailRef'，   “ lastNameRef”和“ state.companyId”。包括它们或删除   依赖项数组react-hooks / exhaustive-deps

所以我们有一个误报的情况。有没有办法抑制这种情况？

Answer 1

根据您的useEffect逻辑，并根据初始化state的方式，您应该执行以下操作：

/*
Example for handling the on mount
initialization through props or `useState`
*/
const App = props => {
  const [state] = useState(DEFAULT_INITIAL);
  const companyRef = useRef(props.DEFAULT_INITIAL);
  const myRef = useRef();

  useEffect(() => {
    if (
      companyRef.current.companyId &&
      DEFAULT_INITIAL.companyId &&
      DEFAULT_INITIAL.companyId !== -1 &&
      myRef.current
    ) {
      myRef.current.focus();
    }
  }, []);

  return <></>;
};

这是因为在“挂载”状态下检查状态

useEffect(() => {
  if (state.companyId !== undefined && state.companyId === -1) {
    return;
  }
}, [])

等同于在通过道具初始化状​​态时使用引用检查useState 或的初始值。

使用useRef初始化的引用不需要位于dep数组中，因为每个组件生命周期中只有一个实例。

请参阅React FAQ：

  

从依赖关系列表中省略函数是否安全？   一般来说，不会。

如果您有200％的把握确定短绒错了，React仍会建议您修复它。

如果您仍然喜欢它，可以像这样禁用皮棉：

useEffect(() => {
  if (state.companyId !== undefined && state.companyId === -1) {
    return;
  }
// eslint-disable-next-line
}, [])