首页 > 解决方案 > 状态不变 - onClick 反应钩子

问题描述

我正在努力改变我的状态......

基本上我有3个重要的功能:

run()触发的功能onClick

  const run = async (e) => {
    e.preventDefault();
    await setLoadingTrue();
    await translateToEnglish();
    await aiEngine();
  };

translateToEnglish()表格形式翻译输入:

  const translateToEnglish = async () => {
    try {
      const token = "***********";
      const parameters = {
        mode: "no-cors",
        method: "post",
        auth_key: token,
        text: [description ,  audience],
        target_lang: "EN",
        source_lang: "FR",
      };
      const result = await axios.post(
        "https://api.deepl.com/v2/translate",
        querystring.stringify(parameters)
      );
      return setAudienceEN(result.data.translations[1].text)
    } catch (err) {
      console.log("there is an error:", err);
    }
   };

这可以使用具有先前在函数中设置aiEngine()的状态的翻译数据。audienceENtranslatetoEnglish()

  const aiEngine = async () => {
    try {
        const parameters = {
          prompt: `Write an ad for :\n""""""\n${descriptionEN}\n""""""\nThis is the ad aimed at ${audienceEN}:\n""""""`,
        };
        const result = await axios.post(
          "https://api.aiengine.com/",
          parameters,
          {
            headers: {
              Authorization:
                "Bearer " + "********",
              "Content-Type": "application/json",
            },
          }
        );
        const sortedResults = result.data.choices.map((val) => val.text);
        setCompletionsEN(sortedResults);
    } catch (err) {
      console.log("Il y a une erreur : ", err);
    }
  };

问题是这return setAudienceEN(result.data.translations[1].text)不起作用,因为当我console.log(audienceEN)进入时aiEngine(),它是空的,不幸的是我不知道为什么......

任何想法为什么家伙?

先感谢您

标签: javascriptreactjsreact-hooks

解决方案


由于更新状态是异步操作,这可能aiEngine()是没有获得更新值的原因audienceEN 。要处理此问题,您可以在使用aiEngine()更新后调用:audienceENuseEffect

 useEffect(()=>{
     const callAiEngine = async ()=>{
      await aiEngine();
     }
     if(audienceEN){
       callAiEngine();
    }

},[audienceEN])

推荐阅读