时间戳

首页 > 解决方案 > 如何从 fetch 请求中获取结果并将数据插入 jsx？

javascript - 如何从 fetch 请求中获取结果并将数据插入 jsx？

问题描述

我正在尝试操纵来自 api 调用的请求并将信息插入到我的 jsx 中，但出现此错误：

“错误：对象作为 React 子级无效（发现：[object Promise]）。如果您打算渲染一组子级，请改用数组。”

我可以看到这与我的 jsx 包含一个承诺有关，但我不明白为什么。

import React from "react";

export default function Card_Container() {
  return (
    <div>
      {fetch("http://localhost:1337/posts")
        .then((res) => res.json())
        .then((data) => {
          data.map((post) => {
            return <h1>{post.blogtitle}</h1>;
          });
        })}
    </div>
  );
}

标签： javascriptreactjspromisefetchjsx

解决方案

作为错误报告，jsx 文件无法呈现对象承诺，请尝试执行以下操作：

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

export default function Card_Container() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch("http://localhost:1337/posts")
      .then((res) => res.json())
      .then((res) => {
        setData(res);
      });
  }, []);

  return (
    <div>
      {data.map((post) => {
        return <h1>{post.blogtitle}</h1>;
      })}
    </div>
  );
}

useEffect一旦组件被挂载，就会触发，当 fetch 调用收到来自服务器的响应时，会将setState信息存储到data其中并再次呈现组件，但是这次如果响应正确存储到data您应该看到一个列表h1 在您的应用程序中

推荐阅读