仅根据Typescript中的ID映射特定对象
提问于 2021-07-26 10:38:59
我有一个对象数组，如下所示：
const cartItems = [
{
id: 1,
new1: "Hello",
new2: "New hello"
},
{
id: 2,
new1: "Hello",
new2: "New hello"
},
{
id: 3,
new1: "Hello",
new2: "New hello"
}
];我目前正在使用这个对象数组来映射所有项目，如下所示：
cartItems.map(product => (
<React.Fragment key={product.id}>
<p>{product.new1}</p>
</React.Fragment>
));这循环了所有的产品，但我希望有此代码限制在一个特定的产品。比如ID=3或者我提供的任何东西。
cartItems.find(product => product.id === 3)上面的代码帮助我找到它，但我不能将其映射为循环，并在其上编写一些React UI。这里的任何帮助都是非常感谢的。
回答 4
Stack Overflow用户
回答已采纳
发布于 2021-07-26 10:43:20
Stack Overflow用户
发布于 2021-07-26 10:46:47
为什么不把找到的项放到它自己的变量中，然后使用它呢？
const cartItems = [
{
id: 1,
new1: "Hello",
new2: "New hello"
},
{
id: 2,
new1: "Hello",
new2: "New hello"
},
{
id: 3,
new1: "Hello",
new2: "New hello"
}
];
const { new1 } = cartItems.find(product => product.id === 3);
return <p>{new1}</p>;这也消除了对密钥的需求。
Stack Overflow用户
发布于 2021-07-26 10:47:55
您可以使用filter()。它将返回一个数组，您可以根据问题对其执行map操作。
{cartItems.filter(product => product.id === 3).map(product => (
<React.Fragment key={product.id}>
<p>{product.new1}</p>
</React.Fragment>
));}正如evolutionxbox在注释中建议的那样，在render中提取变量并使用它会更好。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68528420
复制相关文章
点击加载更多
腾讯云开发者
