React onClick报错：期望函数类型却传入对象，客户删除功能失效

1. 前端onClick事件错误（核心报错原因） #

控制台报错是因为你在Button的onClick中直接执行了deleteDocument(item._id)，这会立即调用函数并返回其结果（Promise对象），而onClick需要接收一个函数引用。

修复代码（Customers.js） #

<Button variant="contained" color="secondary" onClick={() => deleteDocument(item._id)} >
  Delete
</Button>

2. 前端useEffect使用不当 #

useEffect的回调函数不能是async函数，因为async函数会返回Promise，而useEffect期望回调返回清理函数或者undefined。

修复代码（Customers.js） #

useEffect(() => {
  const fetchData = async () => {
    const res = await axios.get("http://localhost:5000/customers");
    setData(res.data);
  };
  fetchData();
}, []);

3. 前端状态更新的竞态问题 #

删除后更新状态时，直接使用data.filter可能会因为闭包导致拿到的不是最新状态，应该使用函数式更新。

修复代码（Customers.js的deleteDocument函数） #

const deleteDocument = async (_id) => {
  await axios.delete(`http://localhost:5000/customers/${_id}`);
  // 使用函数式更新获取最新状态
  setData(prevData => prevData.filter((doc) => doc._id !== _id));
};

4. 后端路由与前端请求不匹配 #

前端删除请求的路径是/customers/:id，但后端定义的删除路由是/customer/:id（少了s），导致请求404。

修复代码（userdata.js） #

router.delete('/customers/:id', function(req, res, next) {
  // 移除多余的req.body参数，删除操作不需要请求体
  user.findByIdAndRemove(req.params.id, function (err, post) {
    if (err) return next(err);
    res.json(post);
  });
});

5. 后端冗余代码清理 #

后端中的deleteDocument函数未被使用，属于冗余代码，直接删除即可：

// 删掉这段冗余代码
function deleteDocument(id) {
  axios.delete(`http://localhost:5000/customer/${id}`)
  .then(res => {
    console.log(res);
    // handle success if needed
  })
  .catch(err => {
    console.log(err);
    // handle error if needed
  });
}

额外优化建议 #

• 为删除操作添加错误处理，提示用户删除状态：

const deleteDocument = async (_id) => {
  try {
    await axios.delete(`http://localhost:5000/customers/${_id}`);
    setData(prevData => prevData.filter((doc) => doc._id !== _id));
  } catch (err) {
    console.error('删除失败:', err);
    // 可添加用户提示，比如alert('删除失败，请重试')
  }
};

• 后端路由改用async/await风格，保持代码一致性：

router.delete('/customers/:id', async (req, res, next) => {
  try {
    const post = await user.findByIdAndRemove(req.params.id);
    res.json(post);
  } catch (err) {
    next(err);
  }
});

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