将对象推入对象数组会复制该数组中已存在的对象

Question

就像问题所说的那样，当我将对象推入一个对象数组时，它会复制该数组中已经存在的对象。 只有在页面重新加载后，副本才会被删除。 我知道这与参考有关。 我尝试复制推入数组的对象，创建了一个带有道具的新对象，但没有任何效果。 任何帮助，将不胜感激。 谢谢

// The persons array is an array of objects 
import { persons } from './main.js';

let entriesFound = []
let data = localStorage.getItem('entriesFound') ;

if(data){
    entriesFound = JSON.parse(data)
    loadList(entriesFound)
}

//Renders the search results to the UI from localStorage
function loadList(array) {

    for(let el of array) {
        const html = 
        `<div id="${el.id}" class="item2">
        <div class="info2">Name:<div class="name">${el.name}</div></div>
        <div class="info2">Date of birth:<div class="born">${el.dob}</div></div>
        <div class="info2">Age:<div class="age">${el.age}</div></div>
        <div class="info2">Place of birth:<div class="city">${el.city}</div></div>
        <div class="info2">ID:<div class="id">${el.id}</div></div>
        <div class="info2">Entered:<div class="added">${el.entered}</div></div>
        </div>`;

     document.querySelector('.searchResult').insertAdjacentHTML('beforeend', html)
    }
}

//Search button to search for entry (in the persons array) that matches the condtional 
export const searchBtn = document.querySelector('.search').addEventListener('click' , function() {

    // Get search string from search bar
    const name = document.querySelector('.searchInput')

   // persons array
     persons.filter( el => {
        if(el.name === name.value) {
           entriesFound.push(el);   // Pushes the object (el) to the entriesFound array
        }                           // I guess this is were it goes wrong
    })
        addItem(entriesFound)
        name.value = ""
        localStorage.setItem('entriesFound', JSON.stringify(entriesFound))
})

// Renders the new search result to the UI
function addItem(entries) {
    for( let item of entries) {
        const html = 
                `<div id="${item.id}" class="item2">
                <div class="info2">Name:<div class="name">${item.name}</div></div>
                <div class="info2">Date of birth:<div class="born">${item.dob}</div></div>
                <div class="info2">Age:<div class="age">${item.age}</div></div>
                <div class="info2">Place of birth:<div class="city">${item.city}</div></div>
                <div class="info2">ID:<div class="id">${item.id}</div></div>
                <div class="info2">Entered:<div class="added">${item.entered}</div></div>
                </div>`;
    
             document.querySelector('.searchResult').insertAdjacentHTML('beforeend', html)
        }
}

Answer 1

发现问题了。 addItem 函数循环遍历整个entriesFound 数组，而它只需要向搜索结果添加一个条目。

     persons.forEach( el => {
        if(el.name === name.value) {
           addItem(el)                 <---- like so, el is an object from 
                                             the persons array of objects!
           entriesFound.push(el);   
        }                           
    })
        addItem(entriesFound)
        name.value = ""
        localStorage.setItem('entriesFound', JSON.stringify(entriesFound))
})

// Renders the new search result to the UI
function addItem(entry) {
                                       <--- got rid of the loop!
        const html = 
                `<div id="${entry.id}" class="item2">
                <div class="info2">Name:<div class="name">${entry.name}</div></div>
                <div class="info2">Date of birth:<div class="born">${entry.dob}</div></div>
                <div class="info2">Age:<div class="age">${entry.age}</div></div>
                <div class="info2">Place of birth:<div class="city">${entry.city}</div></div>
                <div class="info2">ID:<div class="id">${entry.id}</div></div>
                <div class="info2">Entered:<div class="added">${entry.entered}</div></div>
                </div>`;
    
             document.querySelector('.searchResult').insertAdjacentHTML('beforeend', html)
        }