React中点击removeElement删除全部地址，如何实现单条地址删除？

问题现状 #

点击fetchApi按钮可新增地址，但点击删除按钮会清空所有地址，需要改为仅删除当前点击的那条地址。

原代码 #

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>

修改步骤及完整代码 #

调整三个核心点：获取元素索引、修改删除逻辑、传递索引到删除函数，同时修复loading状态重置问题：

const removeElement = (index) => {
  // 过滤掉当前点击索引对应的元素，保留其他所有项
  const newData = allData.filter((_, i) => i !== index);
  setAllData(newData);
};

const fetchApi = async () => {
  try {
    setLoading(true);
    const response = await axios.get("https://random-data-api.com/api/v2/addresses");
    setAllData([...allData, response.data]);
    setLoading(false); // 请求成功后重置loading状态
    console.log(response.data);
  } catch (error) {
    setLoading(false);
    console.log(error);
  }
};

return (
  <Fragment>
    <div>
      <button onClick={fetchApi}>添加地址</button>
      {allData.map((data, index) => (
        // 给列表项添加key，同时拿到当前元素的索引index
        <div
          key={index}
          style={{
            backgroundColor: "#c7c7c7",
            display: "flex",
            flexDirection: "column",
            padding: 16,
            margin: 5,
            borderRadius: 20
          }}
        >
          <p>
            <strong>地址: {data.street_address}</strong>
          </p>
          <p>
            <strong>城市: {data.city}</strong>
          </p>
          <p>
            <strong>街道名称: {data.street_name}</strong>
          </p>
          <p>
            <strong>邮编: {data.zip_code}</strong>
          </p>
          {/* 点击时把当前索引传给删除函数 */}
          <button onClick={() => removeElement(index)}>删除</button>
        </div>
      ))}
    </div>
  </Fragment>
);

关键修改说明 #

• 获取索引：在map方法中添加index参数，同时给每个列表项设置key={index}（符合React列表渲染规范）。
• 删除逻辑：用filter方法创建新数组，排除掉点击的索引对应的元素，避免直接修改原数组。
• 传递索引：删除按钮的onClick改为箭头函数，将当前元素的index传入removeElement。
• 修复loading：请求成功后添加setLoading(false)，避免loading状态一直为true。

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