如何修复 React Hook useEffect 缺少依赖项

Question

import React, { useState, useEffect } from 'react';
import Form from 'react-bootstrap/Form';

function Switch(props) {
  const [enabled, setEnabled] = useState(false);

  useEffect(() => {
    if(enabled !== props.enabled) {
      setEnabled(props.enabled);
    }
  }, [props.enabled]);

  const handleChange = () => {
    props.handleClusterEnabledChange(!enabled);
    setEnabled(!enabled);
  }

  return (
    <Form.Check
      type="switch"
      id={props.id}
      label=""
      onChange={handleChange}
      checked={enabled}
    />
  );
}

export default Switch;

错误：

./src/containers/administration/dwConnections/switch.js 第 11:6 行：React Hook useEffect 缺少依赖项：'enabled'。要么包含它，要么移除依赖数组 react-hooks/exhaustive-deps

Answer 1

只需添加 enabled 作为依赖项：

useEffect(() => {
    if(enabled !== props.enabled) {
      setEnabled(props.enabled);
    }
  }, [enabled, setEnabled, props.enabled]);