javascript - 如何在 React 组件中使用 Promise.all 结果？

Question

我需要弄清楚如何从我的公共文件夹中获取多个 GeoJSON 文件并在 React 组件中呈现坐标。这是相关的代码片段：

export const CoordinatesComponent = () => {
  const [data, setData]: any = useState([]);
  const [isLoading, setLoading] = useState(true);
    
  useEffect(() => {
    let isMounted = true;
    const dataPromises = Promise.all([
      fetch("data/boundary.json", {
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
        },
      }),
      fetch("data/neighborhoods.json", {
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
        },
      }),
    ])
    .then((response) => response.map((a) => a.json()));
    
    const setState = () => {
      if (isMounted) {
        dataPromises.then((a) => setData(a));
        setLoading(false);
      }
      return () => {
        isMounted = false;
      };
    };
    
    setState();
    
  }, []);
    
  if (isLoading) {
    return <div>Loading...</div>;
  }
  return (
    <div>{data}</div> // Just a placeholder.  This array of geoJson objects would be fed into another component
  );
};

虽然我可以通过一次 fetch 操作来做到这一点，但我正在努力让它与 Promise.all 一起工作。当我 console.log 数据变量时，我看到了一组未定义的对象。任何帮助将不胜感激！

Answer 1

问题在于以下then块。由于您现在有一系列承诺，因此再次从响应中获取 JSON 将是同样的问题，您需要在调用中返回res.json()承诺。Promise.all

then((response) => response.map((a) => a.json()));

应该像下面这样更正。

then((responses) => Promise.all(responses.map((res) => res.json())));