地图内的三元运算符

Question

我正在开发一个网络应用程序，用户可以在其中查看项目列表并可以将某些项目标记为收藏夹。收藏夹以 ID 数组的形式提供，并带有一个道具 (this.props.favourites)。为了防止重复条目，如果 item.id 已经在 this.props.favourites 数组中，我想用“从收藏夹中删除”按钮替换“添加到收藏夹”按钮。

但是，我制作的三元 If 语句因语法错误而崩溃。但是我认为我非常严格地遵循了官方示例 ( https://reactjs.org/docs/conditional-rendering.html )。

这是我使用的代码：

 render() {

       const items = this.state.items.map((item, index) => (
           <p key={index}>
               {item.name}
           </p>

           {(this.props.favourites.include(item) ? (
               <button>add fvourites</button>
             ) : (
               <button>delete</button>
     )}

       ));
       return (
           <div>
               <button onClick={this.LoadApi}>Show fetch Items</button>
               <div>{items}</div>
           </div>
       );
   }
}

有谁知道我做错了什么？

原文由 Jasper 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

试试下面的东西

{this.props.favourites.includes(item) ? <button>add favourites</button> :
     <button>delete</button>
 }

原文由 Leeroy_Wonkledge 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

问题：

1- 您在 map 回调方法中返回 2 个元素，这是不正确的，因此将它们包装在一个 div 中。

2- 你有一个额外的 ( 在这里： {(this.props.favourites.include(item)

3- 使用 includes 而不是 include 。

解决方案：

 const items = this.state.items.map((item, index) => (
    <div key={index}>
        <p>
           {item.name}
        </p>

        {this.props.favourites.includes(item) ? (
           <button>add fvourites</button>
        ) : (
           <button>delete</button>
        )}
    </div>
))

原文由 Mayank Shukla 发布，翻译遵循 CC BY-SA 3.0 许可协议