如何使用 Reactjs 从列表中删除元素

Question

const CustomerAddress = () => {
useEffect(() => {
axios({
method: "GET",
url: "http://localhost:8080/customer/showAddress/",
headers: {
Authorization: "Bearer " + localStorage.getItem("token")
}
})
.then(response => {
console.log(response.data);
setData(response.data);
setisLoaded(true);
})
.catch(error => {
console.log(error);
});
}, []);
const deleteAddress = addressId => {
let add = addressId.target.value;
setData(data.filter(addressId => addressId != add));
axios({
method: "POST",
url: "http://localhost:8080/deleteCustomerAddress/" + addressId,
headers: {
Authorization: "Bearer " + localStorage.getItem("token")
}
})
.then(response => {
alert(response.data);
console.log(response);
})
.catch(error => {
alert(error.response.data.message);
console.log("Error is", error.response.data.message);
});
};
const [data, setData] = useState([]);
const [isloaded, setisLoaded] = useState(false);
let customer = null;
if (isloaded) {
customer = data.map(customer1 => (
<div>
<table class="table table-bordered">
<thead>
<tr>
<th> id </th> <th> House Number </th> <th> City </th>
<th> State </th> <th> Zip Code </th> <th> Label </th>
<th> Edit </th> <th> Delete </th>
</tr>
</thead>
<tbody>
<tr>
<th> {customer1.id} </th> <td> {customer1.house_number} </td>
<td> {customer1.city} </td> <td> {customer1.state} </td>
<td> {customer1.zip_code} </td> <td> {customer1.label} </td>
<td>
<button className="btn btn-primary"> Edit Details </button>
</td>
<td>
<button
className="btn btn-danger"
onClick={() => deleteAddress(customer1.id)}
>
Delete
</button>
</td>
</tr>
</tbody>
</table>
</div>
));
}
return (
<div>
{customer}
<center>
<button type="button" class="btn btn-success">
Add Address
</button>
</center>
</div>
);
};

我正在尝试从列表中删除元素，但收到类型错误：无法读取未定义的属性"值"。谁能告诉我我的代码有什么问题。我正在使用过滤方法。从我的列表中删除元素.............

Answer 1

您没有使用任何输入，您只是将 id 传递给deleteAddress。

因此，let add = addressId.target.value;似乎是其他代码的遗留物。

因此，请完全删除该行并将参数重命名为add

然后，您在过滤方面也遇到了问题。您使用addressId但数据包含具有id的对象。

const deleteAddress = (addressId) => {
setData(data.filter((address) => (address.id !== addressId)));