每次我运行removeElement时，它都会清除我的状态

Question

当我按下我的fetchApi按钮时，出现了一个新的地址，如果我继续按下，它会不断添加更多的地址，但是当我按下removeElement按钮时，它删除了所有的地址，我怎么能使它只删除我按下的那个地址呢?

const removeElement = (index) => {
const newData = [];
setAllData(newData);
};
const fetchApi = async () => {
try {
setLoading(true);
await axios
.get("https://random-data-api.com/api/v2/addresses")
.then((response) => {
setAllData([...allData, response.data]);
console.log(response.data);
});
} catch (error) {
setLoading(false);
console.log(error);
}
};
return (
<Fragment>
<div>
<button onClick={fetchApi}>funciona pls</button>
{allData.map((data) => (
<div
style={{
backgroundColor: "#c7c7c7",
display: "flex",
flexDirection: "column",
padding: 16,
margin: 5,
borderRadius: 20
}}
>
<p>
<strong>Address: {data.street_address}</strong>
</p>
<p>
<strong>City: {data.city}</strong>
</p>
<p>
<strong>Street Name: {data.street_name}</strong>
</p>
<p>
<strong>Zipcode: {data.zip_code}</strong>
</p>
<button onClick={removeElement}>botao</button>
</div>
))}
</div>
</Fragment>

Answer 1

在您的removeElement方法中，您将状态allData设置为空数组。每次你运行removeElement，你将清除你的状态。

如果allData中的每个元素都有一个唯一的id，那么您的removeElement方法可能看起来像这样:

const removeElement = (id) => {
const newData = allData.filter(element => element.id === id);
setAllData(newData);
};

和你的组件:

return (
<Fragment>
<div>
<button onClick={fetchApi}>funciona pls</button>
{allData.map((data) => (
<div
style={{
backgroundColor: "#c7c7c7",
display: "flex",
flexDirection: "column",
padding: 16,
margin: 5,
borderRadius: 20
}}
>
<p>
<strong>Address: {data.street_address}</strong>
</p>
<p>
<strong>City: {data.city}</strong>
</p>
<p>
<strong>Street Name: {data.street_name}</strong>
</p>
<p>
<strong>Zipcode: {data.zip_code}</strong>
</p>
<button onClick={()=>removeElement(data.id)}>botao</button>
</div>
))}
</div>
</Fragment>