语义 UI React：同一组件中的多个 useEffect 调用有问题

Question

我需要运行向我的 REST API 查询 2 个组件中的 2 个下拉元素：

    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 背后的数据库的连接。我错过了什么吗？请你帮助我好吗？我先谢谢你了。

西奥

Answer 1

您可以使用 Promise.all 将您的电话转移到一个 useEffect 中。这种类型的 Promise 接受一组已解析的提取调用，以及 returns 一组结果。到那时，您可以对结果做任何您想做的事情。

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" />;
}

结果：

Code Sandbox Demo

语义 UI React：同一组件中的多个 useEffect 调用有问题

Semantic UI React: Problem with multiple useEffect calls in the same component

javascript

rest

reactjs

semantic-ui-react