在 React 前端渲染 Node.js 服务器数据答案

【问题标题】：Render Node.js server data on React frontend在 React 前端渲染 Node.js 服务器数据
【发布时间】：2020-04-02 16:04:22
【问题描述】：

我有以下问题：我对 Node.js 还是很陌生，我想弄清楚如何构建一个简单的 REST-API 将模拟数据发送到 React。在反应中，我想获取数据并将其呈现在列表中。

这是我目前所拥有的

Node.js：

const Joi = require("@hapi/joi");
const express = require("express");
const cors = require("cors");
const app = express();

app.use(cors());
app.use(express.json());

const posts = [
  {
    id: 1,
    heading: "post 1",
    text: "This is a blogpost"
  },
  {
    id: 2,
    heading: "post 2",
    text: "This is also blogpost"
  }
];

app.get("/api/posts", (req, res) => {
  res.send(posts);
});

const port = process.env.PORT || 3001;
app.listen(port, () => console.log(`Listening on port ${port}...`));

我的反应代码：

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

const PostList: React.FC = () => {
  useEffect(() => {
    fetchItems();
  }, []);

  const [items, setItems] = useState([]);

  const fetchItems = async () => {
    try {
      const data = await fetch("http://localhost:3001/api/posts");
      const items = await data.json();
      // console.log("HELLO FROM INSIDE OF FETCHITEMS", items);
      setItems(items);
    } catch (error) {
      console.error(error);
    }
  };
  console.log("STATE", items);

  return (
    <>
      {items.map((item, index) => (
        <h1 key={index}>{item}</h1>
      ))}
    </>
  );
};

export default PostList;

所以我想做的是：

从我的 node.js 服务器发送模拟数据博客文章
获取服务器 url ./api/posts
将 fetch json 对象保存在空状态数组中（项目：[]）
在我的渲染函数中渲染出来

我想我已经完成了大部分设置，但是当我尝试这样做时，我得到了这个错误。

我猜我必须将所有对象保存在一个数组中，但我该怎么做呢？我以为我已经从节点服务器 posts=[] 做到了。这是我在设置后的 console.log 状态时得到的。

我是在后端还是前端做呢？你会如何处理这个问题，我认为这是正确的方式吗？

先谢谢了，埃里克

【问题讨论】：

<h1 key={index}>{item}</h1> 这里的item 可能是Object，所以React 不能渲染它。它应该是字符串/数字或 JSX 元素。

标签： javascript html node.js reactjs

【解决方案1】：

您的服务器正在返回一个Object 类型的数组。当 React 渲染到 DOM 中时，它会将你的 JSX 转换为 HTML，因此只能渲染 html 原语。在运行时，您的 JSX 将作为浏览器可以呈现的 html 注入 DOM。 React 不允许将对象作为子对象，因为它无法将这些对象转换为浏览器的 html。相反，您需要使用对象中的值创建有效的 JSX，然后将其呈现在您的页面上。

假设您想将帖子的标题渲染到 h1 中，然后将内容渲染为标题后面的文本，您可以执行以下操作：

return (
    <>
      {items.map((item) => (
        <div key={item.id}>
            <h1>{item.heading}</h1>
            <p>{item.text}</p>
        </div>
      ))}
    </>
  );

Copyright 2019 DraftKings Inc.
SPDX-License-Identifier: Apache-2.0

【讨论】：

哦，我明白了！我会调查一下。现在似乎有一个错误，说“从不”类型上不存在属性“id”。我猜这是打字稿的事情。这也让我一开始很困惑！

【解决方案2】：

您需要将您的 items 映射到 React 可以呈现为 html 的内容。

一个简单的例子是改变： <h1 key={index}>{item}</h1>

到

<h1 key={index}>{JSON.stringify(item)}</h1>

如果不提供映射，React 本身就不知道如何表示您传递给它的object。您还可以考虑定义一个“帖子”反应片段来表示您的个人帖子，并将它们组合到您的 PostList 中

【讨论】：