如何获取结果并将结果传递给反应中的下一个获取？

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

...