反应字符串数组的键

Question

我有个问题。如何为字符串数组生成密钥？它不是对象，在对象中我可以放置 id ，它可以解决问题。那么我应该在数组中做什么呢？将索引作为键并不是一个好的做法，所以我陷入了困境。

const ingredients = ['rice', 'curry', 'chicken]



    {props.ingredients.map((ingredient) => (
                <Box>{ingredient}</Box>
          ))}

Answer 1

如果你没有任何重复的成分，使用成分名称作为键就可以了。

{props.ingredients.map((ingredient) => (
    <Box key={ingredient}>{ingredient}</Box>
))}

如果您有重复的成分，并且您真的很关心获得正确的密钥，那么如果索引不会改变，您可以使用索引：

{props.ingredients.map((ingredient, i) => (
    <Box key={i}>{ingredient}</Box>
))}

（使用索引并不是普遍的坏习惯，它只是只适合某些情况）

如果您可能有重复的成分并且索引可能会更改，并且您确实想解决此问题，请将其更改为对象数组而不是字符串数组，并且每个对象上都有一个可以用作键的唯一标识属性。