React 从对象数组中删除一个项目答案

【问题标题】：React delete an item from an array of objectsReact 从对象数组中删除一个项目
【发布时间】：2022-02-07 22:12:45
【问题描述】：

我正在从 JSON 文件中获取一些数据。我正在使用 map 方法来显示它，并且它存储在一个状态中。单击删除按钮时，我需要能够删除项目。我正在使用过滤器方法过滤掉该特定项目，但出现此错误：Uncaught TypeError: Cannot read properties of undefined (reading 'filter')

export default function Customers() {

const { appData, setAppData } = useContext(AppContext);
const { customers, packages } = appData;


function handleDeleteCustomer(id) {
    
    console.log(id)
    setAppData(setAppData.customers.filter(customer => customer.id !== id), appData.packages)
}

return (
    <TableContainer component={Paper}>
        <Table sx={{ minWidth: 650 }} aria-label="simple table">
            <TableHead>
                <TableRow>

                    <TableCell >id</TableCell>
                    <TableCell >Name</TableCell>
                    <TableCell />
                    <TableCell />

                </TableRow>
            </TableHead>
            <TableBody>
                {appData.customers.map((row) => {
                    return (
                        <TableRow sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
                            <TableCell component="th" scope="row">{row.id}</TableCell>
                            <TableCell >{row.name}</TableCell>
                            <TableCell ><Button variant="contained">Create Invoice</Button></TableCell>
                            <TableCell ><Button variant="contained" onClick={() => handleDeleteCustomer(row.id)}>Delete</Button></TableCell>
                        </TableRow>
                    )
                })}
            </TableBody>
        </Table>
    </TableContainer>
)

}

【问题讨论】：

标签： arrays reactjs json methods filter

【解决方案1】：

您的代码中有一个错误：

setAppData(appData.customers.filter(customer => customer.id !== id), appData.packages)

不是

setAppData(setAppData.customers.filter(customer => customer.id !== id), appData.packages)

【讨论】：

谢谢。已修复但仍然出现错误：未捕获的 TypeError: Cannot read properties of undefined (reading 'map')
我认为您应该在执行 ``` appData.customers.map(...)``` 之前检查是否定义了客户，您只需添加以下内容即可：``` !appData。顾客？ “没有客户”：appData.cutomers.map(...) ```
只要不点击按钮就定义好了。呈现客户列表。当我单击删除按钮时，由于某种原因，不再定义“appData.customers”。
我相信错误来自setAppData函数。