React实现对象嵌套结构下点击删除对应项的handleDelete函数编写方法

你当前把API返回的数组通过扩展运算符转成了以索引为键的对象，所以不能直接用数组的filter方法，需要先对对象的键值对做过滤处理。

第一步：修复JSX传参错误 #

你当前onClick里的key变量未定义，map遍历Object.keys得到的item就是对应条目的键，需要把传参改成item：

<div className="delete-btn" onClick={()=>handleDelete(item)}>Not Interested</div>

第二步：编写handleDelete实现逻辑 #

const handleDelete = (keyToDelete) => {
  // 遍历对象的键值对，过滤掉要删除的键，生成新对象更新state
  const filteredRes = Object.fromEntries(
    Object.entries(response).filter(([key]) => key !== keyToDelete)
  )
  setresponse(filteredRes)
}

更推荐的优化方案 #

这个API本身返回的就是标准数组，不需要转成对象存储，你可以直接用熟悉的数组方案实现，稳定性更高：

1. 修改useEffect里的state赋值，去掉对象扩展操作

useEffect(() => {
    fetch(url)
    .then(resp => resp.json())
    .then((data) => setresponse(data));
}, [])

2. 修改遍历逻辑，直接遍历数组，用数据唯一id作为key和删除标识

{response ?
  response.map((item) => (
    <li className="travelcompany-input" key={item.id}>
          <div className="single-tour">
            <img src={item.image} alt="" />
            <footer>
              <div className="tour-info">
                <h4>{item.name}</h4>
                <div className="tour-price">
                  <h4>${item.price}</h4>
                </div>
              </div>
              
              <div className="delete-btn" onClick={()=>handleDelete(item.id)}>Not Interested</div>
            </footer>
          </div>
    </li>
))
:<h2>Loading...</h2>}

3. 对应的handleDelete用你熟悉的数组filter即可实现

const handleDelete = (idToDelete) => {
  const filteredRes = response.filter(item => item.id !== idToDelete)
  setresponse(filteredRes)
}

该方案避免了用索引作为key导致的状态错位问题，适配性更强。

内容的提问来源于stack exchange，提问作者Caleb Duniya