如何推送项目或在数组的数组中添加元素

Question

假设我有

0: {nick: "xaxa", pass: "215151", uid: "1123151", gallery: []}
1: {nick: "SamServer", pass: "mathlearner18", uid: "123456123456", gallery: []}

我希望我的项目被推送到图库中，这样我就可以把它做成这样的东西

gallery: [{img:"src",descrip:"text"},{img:"src",descrip:"text"},{img:"src",descrip:"text"},
{img:"src",descrip:"text"},{img:"src",descrip:"text"},{img:"src",descrip:"text"},]

我尝试使用推送方法 savedAccounts.gallery.push({img:"src",descript:"text"}) 但它不起作用。你们中的任何人都可以告诉我它是如何工作的吗？我已将其写在 localStorage 中，这样我就可以为我创建的每个帐户进行画廊存储。我实际上在这里传递了useState()的道具，所以你们可以得到我的分数

我有这个HeaderProfile.jsx 然后格式是这样的

<HeaderProfile 
        item={Guest} 
        islogin = {islogin} 
        changeLog = {setislogin} 
        
        savedAcc = {savedAccounts}
        multisavedAcc = {setsavedAccounts}

        > </HeaderProfile>

其中const[savedAccounts,setsavedAccounts] = useState()是我的localStorage。我在反应钩子组件中传递这个 HeaderProfile.jsx NOTE

const [savedAccounts,setsavedAccounts] = 
0: {nick: "xaxa", pass: "215151", uid: "1123151", gallery: []}
1: {nick: "SamServer", pass: "mathlearner18", uid: "123456123456", gallery: []}

所以我在我的 HeaderProfile.jsx 中传递了它，这里是它的样子

const handleUploadPost = e => {
    e.preventDefault()
    multisavedAcc.gallery.push({img:gallery,description:textgallery})
    console.log(multisavedAcc.gallery.push({img:gallery,description:textgallery}))
}

我想将其传递给 Headerprofile.jsx，然后将其推送到每个目标的图库文件。

编辑我在想是不是因为我没有创建正确的索引 multisavedAcc[index] 的目标在哪里？对于帐户所有者

新刊已编辑：

    const collectionGallery = savedAcc.map((el,i) => {
    let gallery_
    console.log(gallery_)
    if(el.uid == uid) {
        gallery_ = el.gallery.map((items,j) => {
            return(
                <div>
                    <div className='item-sample' key={j} onClick={e => togglePopupImageEdit(j)}>   
                        <div className="img-item">
                        <img src= {items.img} alt="" /> 
                        </div>
                        <h3> {items.description} </h3>
                        
                    </div>
                    <button onClick={e => handleDeleteItem(j)}> Delete </button>
                </div>
            )
        })
    }

    return(
        <div className="collection-photo">
            {gallery_}
        </div>
    )
})

如您所见，我想收回这些项目，以便我可以在 return 中显示它，但是当我尝试刷新它时...图像消失了，但在 localStorage 中它仍然存在请帮助先生。我快完成了我只是希望我的形象不要消失..

这是控制台错误

   blob:http://localhost:3000/fb44255c-d443-4b54-8cbe-860338b6f2ed:1 
   Failed to load resource: net::ERR_FILE_NOT_FOUND
     blob:http://localhost:3000/04d545aa-8ecb-4412-a59f-088cd01a793d:1 
   Failed to load resource: net::ERR_FILE_NOT_FOUND
      blob:http://localhost:3000/3d5e6bff-cfbe-4182-a284-8d15ea6206eb:1 
       Failed to load resource: net::ERR_FILE_NOT_FOUND
   blob:http://localhost:3000/3274933a-1620-4b0a-b35f-1e226f37d8a8:1 
      Failed to load resource: net::ERR_FILE_NOT_FOUND
  blob:http://localhost:3000/eb49ff52-fd9e-4e94-a9bd-86e6e13e2b08:1 
    Failed to load resource: net::ERR_FILE_NOT_FOUND

Answer 1

您需要使用更新后的数据创建状态对象的新实例才能重新呈现。考虑 uid 更新特定的。

更新 handleUploadPost HeaderProfile.jsx。

const handleUploadPost = e => {
    e.preventDefault();
    multisavedAcc(prevState => {
        return prevState.map(item => {
            if (item.uid === "1123151") {
                return {
                    ...item,
                    gallery: [
                        ...item.gallery,
                        { img: "new_img", description: "text" }
                    ]
                };
            } else {
                return item
            }
        });
    });
};

如何推送项目或在数组的数组中添加元素

How do I push items or maybe add an element in array of array

arrays

reactjs

local-storage

push