Блог

Главная - Вопросы по программированию - Состояние не меняется — крючки реакции onClick

Состояние не меняется — крючки реакции onClick

#javascript #reactjs #react-hooks

Вопрос:

Я изо всех сил пытаюсь изменить свое состояние…

В основном у меня есть 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() это работает с использованием переведенных данных с состоянием audienceEN , ранее заданным в translatetoEnglish() функции.

   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() , он пуст, и я, к сожалению, не знаю, почему…

Есть идеи, почему, ребята ?

Заранее спасибо

Комментарии:

1. Пожалуйста, опубликуйте код, в котором вы выполняете операцию onClick.

2. Вот оно, мой друг : <input className="submit-btn" type="submit" value="Générer" onClick={run} />

3. Пожалуйста, добавьте console.log(результат.данные.переводы[1].текст) перед настройкой и проверьте, что вы получаете в нем

4. пожалуйста, покажите aiEngine

5. @SulemanAhmad console.log(result.data.translations[1].text) работает хорошо и показывает мой результат. Вот почему я этого не понимаю :/

Ответ №1:

Поскольку состояние обновления является асинхронной операцией, это может быть причиной aiEngine() того, что значение не обновляется audienceEN . Чтобы справиться с этим, вы можете позвонить aiEngine() после обновления audienceEN , используя useEffect , например:

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

},[audienceEN])

Комментарии:

1. Спасибо, это сработало для меня. Мне просто нужно было создать пользовательский хук, чтобы он не срабатывал useEffect() при первом рендеринге!

Ответ №2:

Вы делаете async operation , и пока ваш ответ пришел axios post call , он запускает следующую строку и обновляет состояние пустым значением. Вы можете попробовать привязку .then и .catch на предмет возможных ошибок. Вот это вы можете попробовать:

    const result = await axios.post(
        "https://api.deepl.com/v2/translate",
        querystring.stringify(parameters)
      )
       .then(result=>{
         console.log(result); //console to check your value structure
         return setAudienceEN(result?.data?.translations[1]?.text) //Add it here after checking structure from console
       })
        .catch(err=>console.log(err));

Делая это, мы надеемся, что это сработает.

Метки: