时间戳

首页 > 解决方案 > 在 React 上下文中设置嵌套数组

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

问题描述

我试图弄清楚如何更新嵌套在 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;
    });
}

标签： reactjsreact-contextreact-statereact-state-management

解决方案

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

轻松更正您的代码将有条件地使用更新的值制作列表的新副本，然后使用您的状态更新功能将该列表设置为您的新状态。

干杯！

推荐阅读