useEffect 不适用于 Semantic UI React 中的多个下拉菜单

Question

我正在使用语义 UI React。 以下 JS 代码对我不起作用：

import React, { useState, useEffect } from "react";
import { Dropdown, Form, Button } from "semantic-ui-react";

export const MovieDropdown = () => {
  const [movie, setMovie] = useState("");
  const [person, setPerson] = useState("");
  const [movieOptions, setMovieOptions] = useState([]);
  const [personOptions, setPersonOptions] = useState([]);

  useEffect(() => {
    Promise.all([
      fetch("/people").then(res =>
        res.json()
      ),
      fetch("/movies").then(res =>
        res.json()
      )
    ])
      .then(([res1, res2]) => {
        console.log(res1, res2);
        var make_dd = (rec) => {
            rec.map(x => {
              return {'key': x.name, 'text': x.name, 'value': x.name}
            })
        }
        setPersonOptions(make_dd(res1))
        setMovieOptions(make_dd(res2))

      })
      .catch(err => {
        console.log(err);
      });
  });

  return (
    <Form>
      <Form.Field>
        <Dropdown
          placeholder="Select Movie"
          search
          selection
          options={movieOptions}
          onChange={(e, {value}) => setMovie(value)}
        />
      </Form.Field>
      <Form.Field>
        <Dropdown
          placeholder="Select Person"
          search
          selection
          options={personOptions}
          onChange={(e, {value}) => setPerson(value)}
        />
      </Form.Field>

    </Form>
  );
};
export default MovieDropdown;

问题是我在运行此组件时丢失了数据库连接。我尝试使用 MySQL 和 SQLite，它给出了同样的问题。 如何解决这个问题？我应该对每个组件进行 1 次提取吗？ 提前谢谢你。

亲切的问候， 西奥

Answer 1

好吧，我不知道DB Connetion，但是在useEffect中调用api的推荐方式是这样的：

useEffect({
 // your code here only once
},[])

或者，

useEffect({
 // your code here will run whenever id changes
},[id])

您的 useEffect 将在每次渲染时运行，不推荐使用这种时间/方式进行 api 调用。