React JS如何将其转换为组件？

Question

const ItemList = () => {

    fetch('http://localhost:3001/api/itemList/', {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "Accept": "application/json",
        },
        body: JSON.stringify({
            userId: localStorage.getItem("userId"),
        })
    }).then(res => res.json())

        .then(data => {
            data = data.map(item => {
                console.log(item);
                return (
                    document.getElementById('cards').innerHTML +=
                    `<div class="card" style="width: 18rem;">
                    <img src="${item.imagePath}" class="card-img-top" alt="..." />
                    <div class="card-body">
                        <h5 class="card-title">${item.itemName}</h5>
                        <p class="card-text">${item.tag}</p>
                    </div>
                </div>`

              

我有一个数据将卡推到前面的数据。我刚刚找到了与卡一起使用的方式，但我想使用卡组件使其变得更好。

如果我将innerhtml零件转换为：

                return (
                    document.getElementById('cards').innerHTML +=
                    <Card style={{ width: '18rem' }}>
                        <Card.Img variant="top" src={item.imagePath} />
                        <Card.Body>
                            <Card.Title>{item.itemName}</Card.Title>
                            <Card.Text>
                                {item.tag}
                            </Card.Text>
                        </Card.Body>
                    </Card>
                )

我正在作为输出

[对象对象] [对象对象] [对象对象] [对象对象]

我在哪里犯错？我该如何推动使用卡片来领先这些JSON数据？

示例JSON数据

{ "id": 1, "itemName": "sadasd", "itemImagePath": "pngwing.com.png", "userID": "117961395738439786389", "tags": [ "tags", "ts" ], "createdAt": "2022-06-15T00:27:42.958Z", "updatedAt": "2022-06-15T00:27:42.958Z" }

Answer 1

只需删除document.getElementById（'cards'）。innerhtml +=。你不想要那个。 ReactJS应进行DOM更新。而且，您不应从fetch函数返回。创建一个状态，您可以使用它来渲染jsx ..这是适合您的功能组件。

import { useEffect, useState } from "react";

const ItemList = () => {
  const [item, setItem] = useState({});

  useEffect(() => {
    fetch("http://localhost:3001/api/itemList/", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
      body: JSON.stringify({
        userId: localStorage.getItem("userId"),
      }),
    })
      .then((res) => res.json())
      .then((data) => {
        setItem(data);
      });
  }, []);

  return (
    <>
      {item && Object.keys(item).length > 0 && (
        <Card style={{ width: "18rem" }}>
          <Card.Img variant="top" src={item.imagePath} />
          <Card.Body>
            <Card.Title>{item.itemName}</Card.Title>
            <Card.Text>{item.tag}</Card.Text>
          </Card.Body>
        </Card>
      )}
    </>
  );
};

export default ItemList;

在这里，我使用使用效果挂钩在dom上安装组件时获取项目。我们正在验证item对象在渲染之前不是空的