React列表key警告 编辑删除数据未同步到json-server

你当前一共存在两个独立问题，分别对应控制台key警告、编辑删除无法持久化到json-server，修复方式如下：

1. 编辑、删除操作无法同步到json-server问题 #

你怀疑的两段请求代码就是问题根源：模板字符串使用错误。
JS中要使用${变量}的插值语法，必须用反引号（）包裹整个字符串，不能用单引号（'）。你当前写的单引号包裹的字符串里，${id}、${isUpdate.id}会被当成普通文本，不会被替换为真实的id值，导致请求地址完全错误，json-server无法匹配到对应数据项，自然不会执行修改/删除操作。另外你写的delete请求地址还缺少了插值的闭合}`，属于语法疏漏。

修复代码 #

• 将删除请求修改为：

axios.delete(`http://localhost:3000/contacts/${id}`)

• 将编辑请求修改为：

axios.put(`http://localhost:3000/contacts/${isUpdate.id}`, {
  name: formData.name,
  telp: formData.telp,
})

额外优化建议 #

你当前的逻辑是先更新前端本地状态，再发接口请求，会出现请求失败时前端显示和后端数据不一致的问题，建议把本地状态更新逻辑移到接口请求成功的.then回调中执行，比如删除逻辑可以改成：

function handleDelete(id) {
  axios.delete(`http://localhost:3000/contacts/${id}`).then((res) => {
    const filteredData = contacts.filter((contact) => contact.id !== id);
    setContacts(filteredData);
    alert("Data telah dihapus");
  });
}

编辑逻辑同理，等put请求返回成功后再更新contacts数组。

2. 控制台"Each child in a list should have a unique key prop"警告 #

这个警告是因为你在List组件中通过map循环渲染列表项时，没有给循环生成的最外层元素设置唯一的key属性。React需要通过key区分不同列表项，优化渲染性能。

修复代码 #

给List组件map返回的最外层div加上key={contact.id}即可，你每条联系人数据的id是全局唯一的，完全符合key的要求，修改后的List组件渲染部分代码：

export default function List({data,handleEdit,handleDelete}) {
  return (
    <div className="list-group">
      {
        data.map((contact) => {
            return (
        {/* 这里加上key属性 */}
        <div key={contact.id} className="list-group-item list-group-item-action">
        <div className="d-flex w-100 justify-content-between">
          <h5 className="mb-1">{contact.name}</h5>
          <div>
            <button onClick={() => handleEdit(contact.id)} className="btn btn-sm btn-link">Edit</button>
            <button onClick={() => handleDelete(contact.id)} className="btn btn-sm btn-link">Del</button>
          </div>
        </div>
        <p className="mb-1">{contact.telp}</p>
      </div>
            );
        })}
    </div>
  );
}

修改完成后刷新页面，控制台的key警告就会消失。

内容的提问来源于stack exchange，提问作者aldo ls