javascript - 如何在映射数组期间从列表中显示元素一次
问题描述
我有一个简短的问题。我在嵌套数组上映射了两次,我只想显示一次值。可能吗?我正在使用反应。为了更好地解释我的案例,我添加了代码:
render(){
const list =
this.props.terms.map((term,index)=>(
<p key={index}>{term}</p>
)
)
const arrays = this.props.recipes.map(recipe=>recipe.c.map(comp=>comp.co));
const filtered = arrays.map(array=>array.filter(el => this.props.terms.includes(el)))
console.log(filtered);
return (
<div>
<input type="text"
onChange={(event)=>this.onChangeHandler(event.target.value)}
/>
<button
onClick={()=>this.props.addTermToCompare(this.state.term)}>
Search ingredients
</button>
<div>
<p>Searched ingredients:</p>
<div>
{list}
</div>
</div>
<div>
What you can cook from ingredients above:
**{filtered.map(one=> one ?
<div>
{this.props.recipes.map(recipe=>recipe.c.map((comp,index)=>comp.co == one ?
<div>
{recipe.re}
</div>
: null
))}
</div>
: null )
}**
</div>
</div>
)
}
因此,在上面的示例中,我只想显示一次 recipe.re(不与另一张地图循环)。
解决方案
推荐阅读
- jquery - 如何从jquery中的点击事件函数中读取变量
- swiftui - 在 SwiftUI 中打开暗模式时更改背景颜色
- git - 尝试将我的 VS Code 与不同的 GitHub 存储库链接
- pdf - 在 python 3.7 中处理 .txt 文件时如何计算 tf-idf?
- java - 在运行时授予权限时出现问题
- python - Seaborn 直方图使列变白
- api - Spotify API 返回空正文
- react-native - 无法安装 react native web-view
- python - 使用 beatifoulsoup 访问第二个标签
- flutter - 使用 MediaQuery 在 Material App 之外构建 ThemeData 时获取设备亮度