里面的三元运算符

Question

我正在开发一个webapp,用户可以在其中查看项目列表,并可以将某些项目标记为收藏夹.收藏夹以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>
       );
   }
}

有谁知道我做错了什么？

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

Answer 2

尝试像下面这样的东西

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