React项目：删除数据后自动新增，如何让字段保持为空？

你的问题出在removeElement函数里——你错误调用了fetchapi方法，导致点击删除按钮时会触发API请求，自动获取新的地址数据。要实现点击删除后清空字段的效果，直接修改removeElement函数即可：

修正后的核心代码 #

// 保留原有的fetchapi函数不变
const fetchapi = async () => {
    try {
      const response = await axios.get("https://random-data-api.com/api/v2/addresses");
      setAllData(response.data);
      console.log(response.data);
    } catch (error) {
      console.log(error);
    }
};

// 修改删除函数，直接清空数据
const removeElement = () => {
  setAllData(null);
};

// 删除按钮无需传参
<button onClick={removeElement}>Botao</button>

为什么原代码会出错？ #

1. 原removeElement里的fetchapi((_, i) => i !== index)逻辑完全错误：fetchapi是异步请求函数，不是数组过滤方法，调用它必然会触发新的API请求。
2. 你的allData存储的是单个地址对象（不是数组），不需要通过索引过滤，直接设置为null就能让页面上的地址卡片隐藏，达到清空效果。

修改后，点击删除按钮时会直接把allData设为null，页面上的地址展示区域会因!allData的判断条件消失，不会触发任何API请求，完美实现清空后保持为空的效果。

内容的提问来源于stack exchange，提问作者Luis Colon