React Hooks - useEffect() 运行两次，因为依赖状态未定义

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

return 当员工 undefined 时，像这样

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]);