在 React 上下文中设置嵌套数组

Posted 2023-04-14

【中文标题】在 React 上下文中设置嵌套数组

【英文标题】：Setting Nested Array in React Context

【发布时间】：2021-10-08 03:58:35

【问题描述】：

我试图弄清楚如何更新嵌套在 React 上下文中的数组。以下是我正在使用的上下文。它由“列表”组成。每个列表都包含一个“项目”数组。

import React, useState, createContext from 'react';

export const ListerContext = createContext();

export const ListerProvider = (props) => 


    const [lists, setLists] = useState([
        
            id: 1,
            items: [ 
                    itemid: 1,
                    text: 'Hello'
                ,
                 
                    itemid: 2,
                    text: 'world'
                ]
        ,
                
            id: 2,
            items: [ 
                    itemid: 2,
                    text: 'Test'
                ]
        
    ]);


    return(
        <ListerContext.Provider value=[lists, setLists]>
             props.children 
        </ListerContext.Provider>
    );

我一直在尝试使用下面的“setLists”方法更改嵌套数组，但它不起作用。我在这里做错了什么？

const removeListItem = (e) => 
    setLists((prevList)=>
        for(var i = 0; i < prevList.length; i++)
            if(prevList[i].id === parseInt(e.target.value[2]))
                prevList[i].items = (prevList[i].items.filter(function(item) 
                    return item.itemid !== parseInt(e.target.value[0]);  
                ))
            
        
        return prevList;
    );

【问题讨论】：

请不要张贴代码图片。发布代码为 text.

详细说明“......但它不起作用” - 它怎么不起作用？有错误吗？是否有意外行为？你在哪里调用 removeListItem()？等等。

对不起！嵌套数组没有改变。我能够更新“prevList”中的嵌套数组，但是当从 setLists 方法返回更新的 prevList 时，更改不会呈现给浏览器。

您需要返回一个全新的数组。 React 只有在数组引用发生变化时才知道发生了变化。用const clone = [...prevList] 克隆prevList，然后改变该克隆并确保返回它。嵌套数组或对象也是如此。 React 只知道原语或引用何时发生变化。

我将返回语句更改为：return [...prevList];，它就像一个魅力。谢谢！

【参考方案1】：

正如@zero298 在他们的评论中提到的，您需要将整个列表传递给您的状态更新函数setLists。您正在使用“字典列表”初始化状态及其更新功能，因此您需要继续这样对待它，您不能有选择地更改字典中的少数属性或列表中的少数元素，而无需更新整个列表。

您的代码的简单更正将是有条件地使用更新的值制作您的列表的新副本，然后使用您的状态更新函数将该列表设置为您的新状态。

欢呼！

【讨论】：

看来你是对的。我将 setLists 的 return 语句更改为 return [...prevList]; 并且浏览器正确呈现。谢谢！