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-你在地图回调方法中返回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>
 }

Answer 3

您在开始时有额外的(。变化

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

到

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

Answer 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

里面的三元运算符

4 个答案: