Javascript 在数组映射期间如何显示列表中的元素一次
我有一个简短的问题。我在嵌套数组上映射了两次,我只想显示一次值。可能吗?我和react一起工作。为了更好地解释我的案例,我添加了代码:Javascript 在数组映射期间如何显示列表中的元素一次,javascript,reactjs,render,Javascript,Reactjs,Render,我有一个简短的问题。我在嵌套数组上映射了两次,我只想显示一次值。可能吗?我和react一起工作。为了更好地解释我的案例,我添加了代码: render(){ const list = this.props.terms.map((term,index)=>( <p key={index}>{term}</p> ) ) const arrays = this.props.recipes.map(recipe=>r
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>
)
}
render(){
常数表=
this.props.terms.map((术语,索引)=>(
{term}
)
)
const array=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(过滤);
返回(
this.onChangeHandler(event.target.value)}
/>
this.props.addTermToCompare(this.state.term)}>
搜索成分
搜索的成分:
{list}
您可以从上述配料中烹饪什么:
**{filtered.map(one=>one?
{this.props.recipes.map(recipe=>recipe.c.map((comp,index)=>comp.co==1?
{recipe.re}
:null
))}
:null)
}**
)
}
因此,在上面的示例中,我只想显示recipe.re一次(不与另一个映射循环)。我们过滤了什么,什么是
配方
?您当前的输出是什么?您希望得到什么?Filtered从两个数组返回相同的值。配方是映射的配方。由于映射过滤和配方,输出被截断。recipes.c是对象的嵌套数组。我们需要代码。请回答您的问题并提供一些示例数据,请恕我直言,看一看,但我的问题很简单:当我在嵌套数组上映射两次时,是否可以显示一个菜谱。我试图在{recipe.re}中做一些事情,但即使我从中创建数组并对其进行过滤,它也会显示几次结果。所以我想知道这种形式是否可能。