useEffect 中的 Promise 有效，即使 IntelliJ 说“从 Promise 返回的 Promise 被忽略”

Question

我想知道下面的代码是如何工作的（它在下拉列表中显示正确的选项），即使 IntelliJ 中的警告说“忽略从 Promise 返回的 Promise”并建议更改代码。 初始版本代码：

import React, { useState, useEffect } from "react";
import axios from "axios";

const Cake = () => {
  const [ing, setIng] = useState([]);
  const [error, setError] = useState("");

  const getIngredients = async () => {
    // returns an array of strings
    const url = new URL("someUrl");
    const result = await axios.get(url.toString());
    return result.data;
  };

  useEffect(() => {
    new Promise((resolve, reject) => {
      getIngredients()
        .then((response) => setIng(response))
        .then((response) => resolve(response))
        .catch((error) => setError(error));
    });
  }, []);

  return (
    <div>
      <Select options={ing} />
    </div>
  );
};

export default Cake;

IntelliJ 建议在我的 Promise 中添加“then”，如下所示：

useEffect(() => {
  new Promise((resolve, reject) => {
    getIngredients()
      .then((response) => setIng(response))
      .then((response) => resolve(response))
      .catch((error) => setError(error));
  }).then((r) => console.log(r));
}, []);

Answer 1

您根本不应该在这里创建 new Promise（正如 IntelliJ 所说，它甚至没有在任何地方使用），它也是 Promise constructor antipattern 到 resolve 的一个承诺，来自另一个承诺的 .then() 回调.

你所需要的只是

useEffect(() => {
    getIngredients().then(setIng, setError);
}, []);