我创建了一个获取数据并将其放置在字段中的按钮,我还创建了一个删除字段中所有数据的删除按钮,但当我按下删除按钮时,它工作,但它会自动添加一个新的(这也是我的任务的一部分,但不是那样)。如果有人能帮助我如何使这些字段保持为空,将不胜感激。
const fetchapi = async () => {
try {
await axios
.get("https://random-data-api.com/api/v2/addresses")
.then((response) => {
setAllData(response.data);
//console.log(allData);
//console.log(setAllData);
console.log(response.data);
});
} catch (error) {
console.log(error);
}
//return allData;
};
const removeElement = (index) => {
const newData = fetchapi((_, i) => i !== index);
setAllData(newData);
};
return (
<Fragment>
<div>
<button onClick={fetchapi}>Fetch Location</button>
{!allData ? null : (
<div
style={{
backgroundColor: "#c7c7c7",
display: "flex",
flexDirection: "column",
padding: 16,
margin: 5,
borderRadius: 20
}}
>
<p>
<strong>Address: {allData.street_address}</strong>
</p>
<p>
<strong>City: {allData.city}</strong>
</p>
<p>
<strong>Street Name: {allData.street_name}</strong>
</p>
<p>
<strong>Zipcode: {allData.zip_code}</strong>
</p>
<button onClick={removeElement}>Botao</button>
</div>
)}
</div>
</Fragment>
2条答案
按热度按时间jexiocij1#
这里有不少地方是错的:
首先让我们看看这行:
你的
fetchapi
函数不带任何参数,所以这里传入的函数什么都不做。另外,你的fetchapi
函数是一个异步函数,所以这一行会将newData
设置为Promise对象。另外,即使你添加了一个await
,由于fetchapi
函数不返回任何内容(因为您已经注解掉了返回allData
的行),因此这将把newData
设置为undefined
。接下来,让我们通过查看调用
setAllData
的位置来了解如何设置allData
。您可以在
removeElement
函数中调用它,该函数处理按钮单击。但是,您也可以在
fetchapi
函数(removeElement
也会调用该函数)内部的回调函数中调用它,以便在GET请求返回数据时调用它。所以当你点击那个按钮的时候:
removeElement
被调用newData
被设置为Promise对象,因为您调用异步函数fetchapi
时没有使用await
setAllData(newData)
将其设置为Promise对象,这意味着像allData.city
这样的对象最终将成为undefined
fetchapi
内部,发出GET请求,一旦请求返回,就运行回调,setAllData(repsonse.data)
再次将其设置为相同的数据如果你想从后端数据中删除一个元素,那么你的按钮需要发送某种POST请求来在后端删除这个元素,然后你可以再次获取数据,现在它不会包含删除元素,或者你可以直接从前端数据中删除这个元素,如果你不关心数据集的任何其他可能的更新的话。
或者,如果您尝试实现的只是获取一次后端数据,然后删除前端上的元素(不修改后端数据),此时您的按钮处理程序应该只修改组件的
allData
状态,而根本不调用fetchapi
。lokaqttq2#
要使数据在按下remove按钮后保持为空,可以更新removeElement函数,将allData的值设置为空对象或空数组,具体取决于您希望数据是什么。
为了用代码解释这一点,下面是一个示例,说明如何更新removeElement函数以将allData的值设置为空对象:
另外,下面的示例说明了如何更新removeElement函数以将allData的值设置为空数组:
使用这两种更新中的任何一种,当您按下删除按钮时,allData的值都会被设置为空对象或空数组,这应该会阻止新数据出现。