地图、索引 0 和按键说明

Question

根据以下提示和正确答案，“show_1”中的第一项如何

以有序列表的形式呈现鞋子项目列表，并将每个项目的键属性设置为等于 “shoe_””和列表中的当前编号。例如列表中的第一项应具有键“shoe_1”

const shoes = ['flip flops', 'basketball shoes', 'tennis shoes'];

const shoeList = shoes.map((shoe, i) => (<li key={"shoe_"+i}>{shoeList}</li>);
<ol>{shoeList}</ol>

如果索引从 0 开始，我不明白第一个项目是 Shoes_1。

Answer 1

您永远不应该使用映射的索引（即

i

）作为键。

由于它们的item（即

shoe

）是一个字符串，所以直接使用它即可。

const { useEffect, useState } = React;

const fetchShoes = Promise.resolve([
  "Flip flops",
  "Basketball shoes",
  "Tennis shoes",
]);

const App = () => {
  const [shoes, setShoes] = useState([]);

  useEffect(() => {
    fetchShoes.then(setShoes);
  }, []);

  return (
    <ol>
      {shoes.map((shoe) => (
        <li key={shoe}>{shoe}</li>
      ))}
    </ol>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(<App />);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>

Answer 2

JavaScript 数组的第一个元素不是第 1 个元素，而是第 0 个元素。

因此，如果您想要的预期行为是迭代将第 0 个元素打印为 1，那么您应该这样做

i+1

。

编辑：

key={"shoe_"+(i+1)}