State 在 axios 調用后第一次在 React 的功能組件中沒有得到更新

Question

問題：“detectLanguageKey”只有在從下拉列表中選擇語言兩次后才會更新。

當我第一次從下拉列表中選擇 select 時，detectLanguageKey 仍然是“”，並且只有在第二次選擇該選項后才會更新。

你能解釋一下為什么嗎？ 我也嘗試過使用異步等待和回調。

import React, { useState, useEffect } from "react";
import axios from "axios";
function SearchBar() {
  const [inputText, setInputText] = useState("");
  const [detectLanguageKey, setdetectedLanguageKey] = useState("");
  const [selectedLanguageKey, setLanguageKey] = useState("");
  const [languagesList, setLanguagesList] = useState([]);
  const [resultText, setResultText] = useState("");

  const getLanguageSource = () => {
    axios
      .post(`https://libretranslate.de/detect`, {
        q: inputText,
      })
      .then((response) => {
        setdetectedLanguageKey(response.data[0].language);
      });
  };

  useEffect(() => {
    axios.get("https://libretranslate.de/languages").then((res) => {
      setLanguagesList(res.data);
      console.log("languagesList", languagesList);
    });
  }, [inputText]);

  const languageKey = (selectedLanguage) => {
    setLanguageKey(selectedLanguage.target.value);
  };

  const translateText = async () => {
    await getLanguageSource();
    let data = {
      q: inputText,
      source: detectLanguageKey,
      target: selectedLanguageKey,
    };
    axios.post(`https://libretranslate.de/translate`, data).then((response) => {
      setResultText(response.data.translatedText);
    });
  };

  return (
    <div>
        <textarea
          rows="10"
          cols="80"
          onChange={(e) => setInputText(e.target.value)}
          placeholder="Type text to translate.."
        ></textarea>
        <textarea
          rows="10"
          cols="80"
          placeholder="Your translated text will be here..."
          value={resultText}
          disabled={true}
        ></textarea>
        {languagesList.length > 0 && (
          <select onChange={languageKey} name="selectedLanguageKey">
            <option>Please Select Language..</option>
            {languagesList.map((lang) => {
              return <option value={lang.code}>{lang.name}</option>;
            })}
          </select>
        )}

        <button
          class="submit-btn"
          onClick={(e) => {
            translateText();
          }}
        >
          Submit
        </button>
    </div>
  );
}

Answer 1

translateText function 更改為此

const translateText = async () => {
  const detectedLanguageKey = await getLanguageSource();
  const data = {
    q: inputText,
    source: detectedLanguageKey,
    target: selectedLanguageKey,
  };
    
  axios.post(`https://libretranslate.de/translate`, data).then((response) => {
    setResultText(response.data.translatedText);
  });
};

getLanguageSource function 更改為此

const getLanguageSource = async () => {
    const response = await axios
      .post(`https://libretranslate.de/detect`, {
        q: inputText,
      })

    return response.data[0].language;
  };

從 useEffect 的依賴數組中移除inputText 。

移除const [detectLanguageKey, setdetectedLanguageKey] = useState("");

您的代碼中存在一些問題。

首先，在translateText中，您正在等待不返回 promise 即getLanguageSource 。

其次，即使getLanguageSource返回 promise，您也希望setdetectedLanguageKey中的getLanguageSource立即生效。 State 更新不是即時的。