React：從 useEffect 調用自定義鈎子或在組件掛載之前運行代碼

Question

我什至有點不願意問這個，但是這里......

我有一個基於此實現的自定義鈎子 useScript，但我想從useEffect調用它，以便它在組件安裝之前運行，但根據鈎子的規則，我知道我不能這樣做。

問題是我想延遲渲染我的組件，直到腳本加載，但我無法設置 state 而不會導致“重新渲染過多”錯誤。

這是我嘗試過的兩個不起作用的選項：

  useEffect(() => {
    // Cannot call another hook from inside useEffect
    useScript('https://cdnjs.cloudflare.com/ajax/libs/typescript/3.9.7/typescript.min.js');
  }, []);

和

  const myComponent = (scripts) => {

    const [loaded, setLoaded] = useState(false);

    scripts.forEach(script => {
      useScript('https://cdnjs.cloudflare.com/ajax/libs/typescript/3.9.7/typescript.min.js');
    });

    // where can I call setLoaded ??

    return (loaded && <div>some content</div>);
  };

這應該很簡單； 我忘了什么？？？

Answer 1

一種方法是讓鈎子返回執行某些功能的 function。

所以而不是：

function useScript() {
  const [isLoaded, setIsLoaded] = useState(false);

  // load the script...

  return [isLoaded]
}

你可以做：

function useLoadScript() {
  const [isLoaded, setIsLoaded] = useState(false);

  const loadScript = () => {
    // load the script...
  }

  return [isLoaded, loadScript]
}

以便可以在另一個鈎子中使用該功能：

function MyComponent(props) {
  const [isLoaded, loadScript] = useLoadScript()
  
  useEffect(() => {
    loadScript()
    // ...
  }, [])

  if (!isLoaded) {
    return <p>Loading...</p>
  }

  return (
    // ...
  )
}