React Hooks - useEffect() 运行两次，因为依赖项的 state 未定义

Question

在下面的代码中，第二个 useEffect() 运行了两次——一次是在employee未定义时，另一次是在employee有值时。

  const [employee, setEmployee] = useState<Employee | undefined>(undefined);
  const [buttonDisabled, disableButton] = useState<boolean>(true);

  useEffect(() => {
    // Run some fetch requests and then set employee state
    setEmployee(employee);
  }, []);

  useEffect(() => {
    const employeeId = employee.Id;
    // Run some fetch requests and then set buttonDisabled state
    disableButton(false);

    // buttonDisabled is passed to a child component as a prop.

  }, [employee]);

我如何确保第二个 useEffect() 只运行一次，并且只在employee有值时运行。

Answer 1

const [employee, setEmployee] = useState<Employee | undefined>(undefined);
const [buttonDisabled, disableButton] = useState<boolean>(true);

  useEffect(() => {
    // Run some fetch requests and then set employee state
    setEmployee(employee);
  }, []);

  useEffect(() => {
    if (employee) {
       const employeeId = employee.Id;
       // Run some fetch requests and then set buttonDisabled state
       disableButton(false);

       // buttonDisabled is passed to a child component as a prop.
    }


  }, [employee]);

Answer 2

当 employee未定义时返回，像这样

const [employee, setEmployee] = useState<Employee | undefined>(undefined);
  const [buttonDisabled, disableButton] = useState<boolean>(true);

  useEffect(() => {
    // Run some fetch requests and then set employee state
    setEmployee(employee);
  }, []);

  useEffect(() => {
    if(!employee)return;
    const employeeId = employee.Id;
    // Run some fetch requests and then set buttonDisabled state
    disableButton(false);

    // buttonDisabled is passed to a child component as a prop.

  }, [employee]);