javascript - .map() 仅返回数组中的最后一个对象

Question

我正在尝试使用浏览器的localStorage来存储对象的数组。每个对象都有两个键: name 和quote。这些值来自 form 元素。当我重新加载浏览器时，我想通过数组映射并显示所有现有条目，当我从表单元素添加另一个条目时，也显示该条目.

我正在使用 JSON.parse 和 JSON.stringify 将数据转换为 string，然后再次转换回 array。我正在使用 document.createElement 并将其附加到父级，并将 array 中的每个对象值映射到特定元素。

当我在 JSON.parse 之后 console.log 来自 localStorage 的数组时，它看起来像这样:

[
{name: "sda", quote: "asd"}
{name: "fff", quote: "dsa"}
{name: "", quote: ""}
{name: "ferfe", quote: "fre"}
{name: "yhtyh", quote: "grtg"}
{name: "fdf", quote: "ds"}
{name: "fdf", quote: "ds"}
]

当我重新加载浏览器并映射数组时，它只返回其中的最后一个元素，我不知道为什么。

const process = () => {
    const getList = JSON.parse(localStorage.getItem('key_name')).map(item => JSON.parse(item));
    console.log(getList)
    const cite = document.createElement('cite');
    const p = document.createElement('p');

    document.getElementById('quote_list').appendChild(cite);
    document.getElementById('quote_list').appendChild(p);

    return(
      getList.map(item => {
        cite.innerHTML = item.quote;
        p.innerHTML = item.name;
      })
    )
  }

  const setData = () => {
    let getList = JSON.parse(localStorage.getItem('key_name'));
    const quote = document.quoteForm.quote.value;
    const name = document.quoteForm.name.value;
    const data = {name: name, quote: quote};
    const JsonData = JSON.stringify(data);
    localStorage.setItem('entry', JsonData);
    getList.push(JsonData);
    localStorage.setItem('key_name', JSON.stringify(getList));
    process();
  }

  window.addEventListener('onload', process());

如果我从表单元素添加另一个条目，它就可以正常工作。如果我重新加载浏览器，它只会返回数组中的最后一项。当我点击表单的提交按钮时，setData()被触发。

Answer 1

问题是您在 map() 循环的每次迭代中都会覆盖 2 个元素的innerHTML，并且只能看到最后一个

我的猜测是您希望每个项目都有新元素

尝试改变:

 getList.map(item => {
    cite.innerHTML = item.quote;
    p.innerHTML = item.name;
  }) 

至

const list = document.getElementById('quote_list');

getList.forEach(item => {
  const cite = document.createElement('cite');
  const p = document.createElement('p');
  cite.innerHTML = item.quote;
  p.innerHTML = item.name;
  list.appendChild(cite);
  list.appendChild(p)

})

<小时/>

注意:window.addEventListener('onload', process()); 应该是:

window.addEventListener('onload', process);
                                  // ^^ function reference not 
                                  // result of calling function