React CRUD应用删除按钮报错：no-unused-expressions问题排查

错误原因 #

1. onClick事件未正确调用函数：你写的onClick={()=>{deleteUSer}}只是引用了函数本身，没有执行调用操作，也没传递必要的商品ID参数，这属于无效表达式，触发了eslint的no-unused-expressions规则报错。
2. 错误使用Link组件：Link是React Router用于路由跳转的组件，删除操作不需要页面导航，用它做删除按钮会导致不必要的路由行为，应该改用普通<button>元素。
3. 函数名语义/拼写问题：deleteUSer里的U大写且语义不符（你是删除商品不是用户），建议改成deleteProduct更清晰。

修正后的代码片段 #

const Products = () => {
  const [products, setProducts] = useState([]);
  
  useEffect(() => {
    loadProducts();
  }, []);

  const loadProducts = async () => {
    const result = await axios.get("http://localhost:3001/products");
    setProducts(result.data);
  };

  // 修正函数名并保留原有逻辑
  const deleteProduct = async id => {
    await axios.delete(`http://localhost:3001/products/${id}`);
    loadProducts();
  }

  // 假设此处是遍历products渲染表格行的逻辑
  return (
    <div>
      {products.map(product => (
        <div key={product.id}>
          <Link className='btn btn-outline-primary m-2' to={`/product/edit/${product.id}`}>Edit</Link>
          {/* 替换为button，正确调用删除函数并传递ID */}
          <button className='btn btn-danger m-2' onClick={() => deleteProduct(product.id)}>Delete</button>
        </div>
      ))}
    </div>
  )
};

关键修正点 #

• 将删除操作的<Link>替换为<button>，避免路由跳转干扰删除逻辑。
• onClick回调改为() => deleteProduct(product.id)，既调用了函数，又传递了当前商品的ID参数。
• 修正函数名拼写与语义，让代码更易读。

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