在 React 前端渲染 Node.js 服務器數據

Question

我有以下問題：我對 Node.js 很陌生，我想弄清楚如何構建一個簡單的 REST-API，將模擬數據發送到 React。 在反應中，我想獲取數據並將其呈現在列表中。

這是我到目前為止

節點.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 狀態后得到的結果。

我是在后端做還是在前端做？ 你會如何處理這個問題，我是否以正確的方式思考這個問題？

預先感謝，埃里克

Answer 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

Answer 2

您需要將您的items映射到 React 可以呈現為 html 的內容。

一個簡單的例子是改變： <h1 key={index}>{item}</h1>

到

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

在不提供映射的情況下，React 本身並不知道如何表示您傳遞給它的object 。 您還可以考慮定義一個“發布”反應片段來表示您的個人帖子，並將它們組合到您的 PostList 中