如何在映射数组期间从列表中显示一次元素

Question

我的问题很简短。我在嵌套数组上映射两次，我想只显示一次值。可能吗？我正在做出反应。为了更好地解释我的情况，我添加了代码：

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一次（不与另一个地图循环）。