如何獲取結果並將結果傳遞給反應中的下一個獲取？

Question

如何獲取version和languages並將它們傳遞給getChampions function

const [version, setVersion] = useState(0)
const [languages, setLanguages] = useState([])
const [selectedLanguage, setSelectedLanguage] = useState('')
const [champions, setChampions] = useState([])

useEffect(() => {
  getVersion().then((version) => setVersion(version))
    .then(getLanguages().then(languages => {
      setLanguages(languages)
      setSelectedLanguage(languages[0])
    }))
    .then(getChampions(version, selectedLanguage).then(champions => setChampions(champions)))
}, [])

我從useState的初始化中獲取默認值，其中version = 0和languages = []

Answer 1

您可以在單獨的 function 中使用 async await 來獲取版本和語言，並使用獲取的版本和語言來獲取冠軍數據。 看看下面的例子。

 const [version, setVersion] = useState(0) const [languages, setLanguages] = useState([]) const [selectedLanguage, setSelectedLanguage] = useState('') const [champions, setChampions] = useState([]) const fetchData = async () => { const versionData = await getVersion(); setVersion(versionData) const languageData = await getLanguages(); setLanguages(languageData) setSelectedLanguage(languageData[0]) const championsData = await getChampions(versionData, languageData[0]) setChampions(championsData) } useEffect(() => { fetchData(); }, [])

Answer 2

setState是異步的，所以如果你setState然后在你不能保證獲得當前的state值之后立即使用state調用 function。 @Yadab 的回答解決了這個問題，但使用響應中的變量而不是 state 中的變量調用getChampions 。

我個人的偏好是使用單獨的鈎子來響應 state 的變化。 似乎getVersion和getLanguages並不相互依賴，可以同時運行，而不是一個接一個地運行。

const App = () => {
  const [version, setVersion] = useState(0);
  const [languages, setLanguages] = useState([]);
  const [selectedLanguage, setSelectedLanguage] = useState("");
  const [champions, setChampions] = useState([]);

  useEffect(() => {
    getVersion().then(setVersion);
  }, []); // run once - include [setVersion] if using eslint

  useEffect(() => {
    getLanguages().then((languages) => {
      setLanguages(languages);
      setSelectedLanguage(languages[0]);
    });
  }, []); // run once - can include deps [setLanguage, setSelectedLanguage] for eslint

  useEffect(() => {
    // only execute if both version and selectedLanguage have already been set
    if (version && selectedLanguage) {
      getChampions(version, selectedLanguage).then(setChampions);
    }
  }, [version, selectedLanguage]); // run whenever version or selected language changes

...