reactjs - 一次 ReactJS 列出对象列表中的项目

Question

我有这个文件：

产品列表.js

import React from "react";

export default function ProductList() {

document.addEventListener("DOMContentLoaded", () => {
    var listeditems = {};
    const list = document.getElementById("list");
    if (items !== null) {
        for (let f = 0; f < Object.keys(items).length; f++) {
            const item = items[f];
            
            if (!Object.keys(items).includes(item.name)) {
                listeditems[item.name] = null;
                list.innerHTML +=
                  "<p>" + item.name + ", sells for €&quot; + item.price + "</p>";
            }
        }
    } else {
      list.innerText = "None yet!";
    }
});

return (
    <span id="list"></span>
);
}

在 App.js 中呈现如下：

import ProductList from './ProductList';

return(
    // Something
    <ProductList/>
    // And more...
);

items在哪里{"0":{"name":"Banana","price":"0.22"}}。这输出：

<span id="list"><p>Banana, sells for €0.22</p><p>Banana, sells for €0.22</p></span>

如您所见，<p>Banana, sells for €0.22</p>它在那里有两次，而在对象（列表）中只有一次。

我该如何防止这种情况？，我如何才能<p>...</p>在列表中的每个项目中只获得一个。

标签： reactjsobjectcreate-react-app

Answer 1

    var out;

    if (items !== null) {
        for (let f = 0; f < Object.keys(items).length; f++) {
            const item = items[f];
            if(item.name !== undefined){
                out += "<li>" + item.name + ", sells for €&quot; + item.price + "</li>";
            }
        }
        window.addEventListener('DOMContentLoaded', () => {
            document.getElementById("list").innerHTML= out.replace("undefined", "");
        });
    } else {
        window.addEventListener('DOMContentLoaded', () => {
            document.getElementById("list").innerHTML="<li>None yet</li>";
        });
    }

    return (
        <div>
            <h3>A list of your products</h3>
            <ul id="list"></ul>
        </div>
    );