useEffect 中的道具“未定义”

Question

我一直在使用用户 ID 令牌，以我在登录时从数据库中获取并存储在 Redux 存储中的道具的形式。到目前为止一切顺利，它在我的应用程序中的任何地方都可以使用，除非我尝试在 useEffect 中的页面加载时检索它：

   useEffect(() => {
    const findLang = async () => {
     const raw = await fetch(`/user-lang?token=${props.token}`);
     const data = await raw.json();
     setLanguage(data.lang)
  };
   findLang();
  }, []);

我得到的只是一个undefined，我的整个组件都依赖于这个令牌。但是，它在 useEffect 函数之外的组件中可用，因此它与 useEffect 有关。谁能想到绕过这个的方法？谢谢

Answer 1

当应用redux store初始化时，token还不存在。令牌更改时需要调用useEffect() 块，如果token 尚不存在则跳过findLang() 调用：

useEffect(() => {
  if(!props.token) return; // if token doesn't exist yet, don't call the api

  const findLang = async() => {
    const raw = await fetch(`/user-lang?token=${props.token}`);
    const data = await raw.json();
    setLanguage(data.lang)
  };
  findLang();
}, [props.token]);

如果您不希望useEffect() 在第一次更新后对token 的更改做出反应，您可以使用 ref 来避免它：

const langFetched = useRef(false);

useEffect(() => {
  if(!props.token || langFetched.current) return; // if token doesn't exist yet lang already fetched, don't call the api

  langFetched.current = true;

  const findLang = async() => {
    const raw = await fetch(`/user-lang?token=${props.token}`);
    const data = await raw.json();
    setLanguage(data.lang)
  };
  findLang();
}, [props.token]);