语义UI React.NET 在同一组件中调用多个useEffect的问题。

Question

我需要为一个组件中的两个下拉元素运行两个查询到我的REST API。

    useEffect(() => {
      fetch('/movies').then(response =>
        response.json()).then(data =>
          setMovieOptions(data.map(x =>
          {
            return {'key': x.name, 'text': x.name, 'value': x.name}
          }))
        )
    }, [])

    useEffect(() => {
      fetch('/people').then(response =>
        response.json()).then(data =>
          setPersonOptions(data.map(x =>
            {
              return {'key': x.name, 'text': x.name, 'value': x.name}
            }))
          )
    }, [])

看起来如果我使用 useEffect 不止一次，我失去了连接到我的REST API背后的DB.我错过了什么？能否请你帮助我？我提前感谢你。

Theo

Answer 1

你可以将你的调用移动到一个单一的 useEffect，使用 Promise.all. 这种类型的Promise接受一个已解决的fetch调用数组，然后返回一个结果数组。在这一点上，你可以对结果做任何你想做的事情。

import React, { useEffect } from "react";

export default function App() {
  useEffect(() => {
    Promise.all([
      fetch("https://jsonplaceholder.typicode.com/todos/1").then(res =>
        res.json()
      ),
      fetch("https://jsonplaceholder.typicode.com/todos/2").then(res =>
        res.json()
      )
    ])
      .then(([result1, result2]) => {
        console.log(result1, result2);
      })
      .catch(err => {
        console.log(err);
      });
  });
  return <div className="App" />;
}

结果。

代码沙盒演示