我正在創建一個網站，并且我在 jsx 中使用該樣式，但是，在輸出列表時樣式不起作用。我已經通過分別輸出每個有效的方法來完成它，但是，我想通過輸出列表/數組使其更具可重復性。沒有關于 stying 的錯誤消息，但我有一條錯誤消息，它無法識別列表中每個項目的鍵。我為這個產品頁面創建了兩個部分，第一個部分是所有產品都將在我稱之為第二個部分的地方，其中包含模板，然后它將通過讀取列表/數組來呈現所有產品。這是主要的“Products.js”import React, { Component } from 'react';import './Products.css';import Product from './Product'class Products extends Component {state={  product: [    { name: "T-SHRIT1", colour: "#404040", price: "￡50", imgSrc: "./imgs/products/test.png", imgalt: "t-shirt", accentcolour: "#D9D9D9", id: 1 },    { name: "T-SHRIT2", colour: "#404040", price: "￡50", imgSrc: "./imgs/products/test.png", imgalt: "t-shirt", accentcolour: "#D9D9D9", id: 3 },    { name: "T-SHRIT3", colour: "#C4C4C4", price: "￡50", imgSrc: "./imgs/products/test2.png", imgalt: "t-shirt", accentcolour: "#626262", id: 2 },    { name: "T-SHRIT4", colour: "#C4C4C4", price: "￡50", imgSrc: "./imgs/products/test2.png", imgalt: "t-shirt", accentcolour: "#626262", id: 4 },  ]}  render() {    return (      <div className="Products">        <div className="Products_container">          <Product product={this.state.product} />            </div>          </div>    );  }}export default Products;這是模板代碼“Product.js”import React from 'react';import './Products.css';import anime from 'animejs';const Product = ({product}) => {    const Productslist = product.map(item => {    return(      <div className="Product" style={{background: item.colour,}} key={item.id}>    <div className="ProductName" style={{color: item.accentcolour}}>{item.name}</div>    <img src={item.imgSrc} alt={item.imgAlt} className="ProductImg"/>    <div className="ProductPrice" style={{color: item.accentcolour}}>{item.price}</div>  </div>    )  })  return (    <div className="Product">      { Productslist }    </div>  );}export default Product;