使用Hooks的异步等待（Async await）用法

Question

我有一个简单的翻译函数，它接受一个参数（字符串）并返回字符串。当我像这样使用它时await translation(key)，它运行得很好。然而，我需要在React Native组件中频繁使用它，如下所示。

<Text>{tranlate("faqs")}</Text>

再说，又在某个地方。

<Button title={translate("terms")}/>

我的问题是，尽管它是一个异步函数，但如果没有使用await或then/catch块，它不会被触发。除了使用await或then/catch的方式之外，我还有什么其他简单的方法可以使用它，因为像下面这样使用它是不起作用的。

<Text>{await translate("faqs")}</Text>

非常感谢任何帮助！谢谢。

- Ali Akram

Answer 1

最好创建一个自定义钩子，它以key作为输入，并返回翻译后的键。

在(J|T)SX中不应使用async-await。 CODESANDBOX

因此它也可以在多个组件中使用

const _cache = {};

function useTranslate(key) {
  const [state, setState] = useState(key);

  useEffect(() => {
    (async () => {
      try {
        // IF PROMISE RESOLVED THEN GET TRANSLATED VALUE
        const cachedValue = _cache[key];
        if (!cachedValue) {
          const translatedValue = await translate(key);
          _cache[key] = translatedValue;
          setState(translatedValue);
        } else setState(cachedValue);
      } catch (error) {
        console.log(error);
      }
    })();
  }, [key]);

  // IF VALUE IS TRANSLATED THEN IT WILL RETURN VALUE
  // ELSE RETURN KEY AS A FALLBACK VALUE
  return state;
}

export default function App() {
  const translateFAQ = useTranslate("faqs");
  return (
    <div className="App">
      <Text>{translateFAQ}</Text>
    </div>
  );
}

- DecPK

---

但是为什么呢？我们已经在_cache对象中缓存了值。 - undefined

我有一个小问题，就是当我使用useTranslate("somekey")并且在useEffect块内部放置console log时，我观察到它在单个调用中被多次调用。你认为上面分享的代码有什么问题吗？非常感谢。 - undefined

没问题，如果你多次使用useMultiple钩子，那完全没问题 - undefined

是的，但是对于一次使用，它应该只打印一次控制台，而不是打印2-3次。 - undefined

@AliAkram 你能给我看看你的代码吗？最好是在任何在线的codesandbox上。如果不看代码，很难想象。 - undefined

Answer 2

你可以使用一个简单的自定义钩子，它将返回你所翻译的文本。

import { useEffect, useState } from "react";

// Your translate function
const translate = async (str) => {
  return str;
};

export const useTranslate = (str) => {
  const [translatedText, setTranslatedText] = useState(null);

  useEffect(() => {
    const getTranslation = async () => {
      const result = await translate(str);
      setTranslatedText(result);
    };

    getTranslation();
  }, [str]);

  return translatedText;
};

这样就可以在组件中使用了：

const translatedText = useTranslate('abc')

return (
  <Text>{translatedText}</Text>
)

- Ali Nauman

---

你的答案和我的答案有什么区别？它们几乎是一样的。 - undefined

我们俩同时写的 :) - undefined

谢谢@AliNauman，这也是一个很好的解决方案，感谢你的帮助。 - undefined