使用 Hooks 进行异步等待

Question

我有一个简单的翻译函数，它接受一个参数（字符串）并返回字符串。当我像

await translation(key)

那样使用它时，它工作得很好，我需要它在反应本机组件中经常使用它，如下所示

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

然后又在某个地方

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

我的问题是，虽然它是一个异步函数，并且没有await或then/catch块就不会触发。我可以通过其他方式简单地使用它而无需等待或然后/捕获，因为像下面这样使用它是行不通的

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

任何帮助将非常感激！谢谢

Answer 1

您可以使用一个简单的自定义挂钩，它将返回翻译后的文本：

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

Answer 2

最好创建一个自定义挂钩，将

key

作为输入并返回翻译后的密钥。

您不应该在

async-await

中使用

(J|T)SX

。

CODESANDBOX

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

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

  useEffect(() => {
    (async () => {
      try {
        const translatedValue = await translate(key);
        setState(translatedValue);
      } catch (error) {
        console.log(error);
      }
    })();
  }, [key]);

  return state;
}

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