如何在React組件中正確設定“key”？

以下是三個 React 組件：

產品.jsx

import statusMap from "../statusMap";

function Product(props) {
  const {
    prod_id: id,
    prod_name: title,
    prod_status: status,
    prod_price: price,
    prod_oldprice: oldPrice,
  } = props;

  let oldPriceChecker = (oldPriceValue) => {
    if (oldPriceValue) {
      let oldPriceStr = oldPriceValue   " z?";
      return oldPriceStr;
    } else {
      return "";
    }
  };

  let statusChecker = (value) => {
    if (value != undefined && value != "") {
      let string = value;
      let array = string.split(",");
      for (let i = 0; i < array.length; i  ) {
        array[i] = statusMap.get(array[i]);
      }

      return array.map((n) => <div className="status">{n}</div>);
    }
  };

  return (
    <div className="row">
      <div className="card">
        <div className="card-image">
          <img src="https://via.placeholder.com/150" key={id} />
          <div className="status_container">{statusChecker(status)}</div>
        </div>
        <div className="card-content">
          <span className="card-title">{title}</span>
          <hr className="card_hr" />
          <p className="card_price">{price} z?</p>
          <div className="card_price old_price">
            {oldPriceChecker(oldPrice)}
          </div>
          <div></div>
        </div>
      </div>
    </div>
  );
}

export { Product };

產品.jsx

import { Product } from "./Product";

function Products(props) {
  const { products = [] } = props;

  return (
    <div className="products">
      {products.length ? (
        products.map((product) => (
          <Product key={product.prod_id} {...product} />
        ))
      ) : (
        <h4 className="products_error">Nothing found</h4>
      )}
    </div>
  );
}

export { Products };

過濾器.jsx

import statusMap from "../statusMap";

const Filter = ({ values, value, onChange }) => (
  <div className="row filter_container">
    <h3 className="filter_title">Sortowa? wed?ug</h3>
    <div className="filter_wrapper">
      {values.map((n) => (
        <label>
          <input
            className="with-gap"
            type="radio"
            onChange={() => onChange(n)}
            checked={value === n}
          />
          <span>{statusMap.get(n)}</span>
        </label>
      ))}
    </div>
  </div>
);

export { Filter };

我完成了專案，但以下錯誤繼續掛在控制臺中：

錯誤1.png

錯誤2.png

錯誤3.png

請告訴我如何洗掉它們

我已經詳細閱讀了關于 key 引數的檔案。您可能會注意到我已嘗試設定鍵值，但這并不能清除控制臺中的錯誤。

uj5u.com熱心網友回復：

當我們從陣列的 map 函式回傳時，我們需要為每個元素設定一個唯一的鍵。所以你可以試試這個；

  let statusChecker = (value) => {
    if (value != undefined && value != "") {
      let string = value;
      let array = string.split(",");
      for (let i = 0; i < array.length; i  ) {
        array[i] = statusMap.get(array[i]);
      }

      return array.map((n) => <div key={n} className="status">{n}</div>);
    }
  };

我假設您的status專案在您定義的陣列中是唯一的。關心key={n}以下內容；

return array.map((n) => <div key={n} className="status">{n}</div>);

uj5u.com熱心網友回復：

您需要為從 Array.map 函式回傳的每個元素提供一個唯一鍵。

Array.map 函式具有三個引數：

Array.map((element,index,array)=>{return ...}

在此處閱讀有關陣列函式的更多資訊：

知道密鑰應該是唯一的，您可以這樣做：

return array.map((element,index) => <div key={index} className="status">{n}</div>);

標籤：javascript 反应

上一篇：如何使用從API回傳的最新資料設定初始狀態？

下一篇：無法讓JavaScript從表單發布到表格