我在控制台上收到了这个错误信息："Each child in a list should have a unique "key" prop."

在我的控制台中出现了这个错误，提示“列表中的每个子元素都应该有一个唯一的“key”属性”，我不明白如何解决它。

这是我在控制台中得到的错误图像链接。

这是我为产品组件编写的代码：

const Products = ({ cat, filters, sort }) => {
  const [products, setProducts] = useState([]);
  const [filteredProducts, setFilteredProducts] = useState([]);
  useEffect(() => {
    const getProducts = async () => {
      try {
        const res = await axios.get(
          cat
            ? `http://localhost:5000/api/products?category=${cat}`
            : "http://localhost:5000/api/products"
        );
        setProducts(res.data);
      } catch (err) {}
    };
    getProducts();
  }, [cat]);
  useEffect(() => {
    cat &&
      setFilteredProducts(
        products.filter((item) =>
          Object.entries(filters).every(([key, value]) =>
            item[key].includes(value)
          )
        )
      );
  }, [products, cat, filters]);
  useEffect(() => {
    if (sort === "newest") {
      setFilteredProducts((prev) =>
        [...prev].sort((a, b) => a.createdAt - b.createdAt)
      );
    } else if (sort === "asc") {
      setFilteredProducts((prev) =>
        [...prev].sort((a, b) => a.price - b.price)
      );
    } else {
      setFilteredProducts((prev) =>
        [...prev].sort((a, b) => b.price - a.price)
      );
    }
  }, [sort]);
  return (
    
      {cat
        ? filteredProducts.map((item) => )
        : products
            .slice(0, 8)
            .map((item) => )}
    
  );
};

这是我为产品组件编写的代码：

const Product = ({ item }) => {
    return (
      
        
        
        
          
            
          
          
            
            
            
          
          
            
          
        
      
    );
  };

我也不明白错误的来源。