javascript - 在useEffect中设置状态完成后如何调用函数？

Question

我想运行 customFunction仅当 customEffect已完成设置isReady状态。和customFunction无论 isReady 是否应该只运行一次设置为 false或 true只要它在设置后运行。

import customFunction from 'myFile';

export const smallComponent = () => {
  const [isReady, setIsReady] = useState(false);

  useEffect(() => {
    const customEffect = async () => {
      try {
        const response = await get(
          `some-api.com`,
        );
        return setIsReady(response); // response can be true or false
      } catch {
        return null;
      }
    };

    customEffect();

    customFunction();
  }, []);

  return (
    <>Hello World</>
  )

}

我尝试将 isReady 添加为第二个 useEffect 参数，但随后我的 customFunction 在 customEffect 完成之前运行，然后在设置 isReady 之后再次运行。
还尝试使用单独的 useEffect，但似乎仍然在 customEffect 完成之前运行。

Answer 1

将初始值设置为 null并使用单独的 useEffect正如 Kevin 建议的那样(仅不检查 isReady 真/假)。
在这种情况下 setIsReady将改变isReady从 null 到 true/false 和第二个 useEffect将被调用。

import customFunction from 'myFile';

export const smallComponent = () => {
    const [isReady, setIsReady] = useState(null);

    useEffect(() => {
        const customEffect = async () => {
            try {
                const response = await get(
                    `some-api.com`,
                );
                return setIsReady(response);
            } catch {
                return null;
            }
        };

        customEffect();
    }, []);

    useEffect(() => {
       if (null === isReady) {
          return;
       }
       customFunction();
    }, [isReady]);

    return (
        <>Hello World</>
    )
}