地图内的三元运算符答案

【问题标题】：ternary operator inside map地图内的三元运算符
【发布时间】：2018-07-13 22:57:54
【问题描述】：

我正在开发一个 web 应用程序，用户可以在其中查看项目列表并可以将某些项目标记为收藏夹。收藏夹作为带有道具的 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>
       );
   }
}

有人知道我做错了什么吗？

【问题讨论】：

函数是includes而不是include。

标签： javascript reactjs jsx

【解决方案1】：

问题：

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>
))

【讨论】：

【解决方案2】：

试试下面的方法

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

【讨论】：

请注意.includes() won't work in IE - 您可以使用a polyfill 或查看.indexOf(item) > -1

【解决方案3】：

一开始你有额外的(。改变

{(this.props.favourites.include(item)...

到

{this.props.favourites.include(item)...

【讨论】：

【解决方案4】：

import * as React from 'react'

render() { 
  const items = this.state.items.map((item, index) => (
    <React.Fragment key={index}>
      <p>{item.name}</p>
      {this.props.favourites.includes(item) ? (
        <button>add favourites</button>
      ) : (
        <button>delete</button>
      )}
    </React.Fragment>
  ));

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

所做的更改：

如 Prakash sharma 指出的那样删除多余的括号。
在 React.Fragment 中包装 map 的返回值。如果不包装在片段或数组中，则无法从函数返回多个元素。
将 .include 更改为 .includes

【讨论】：