Question

我在反应组件中使用map循环遍历列表。当我在map循环中有一个链接时它工作正常但是当我尝试为它创建一个优化的构建时，我的第二个链接返回一个错误。 Intellij在我<a it expects either a ',' or a ')'之后给出了一个错误。我看不出我错过了一个支架或任何东西。

{this.state.players.map(singlePlayer =>
       <Link to={'edit-player/' + singlePlayer.id}><li key={singlePlayer.id}>{singlePlayer.name}</li></Link>
       <a id={singlePlayer.id} onClick={this.handleDelete.bind(this)}>delete</a>
                                    )}

Answer 1

map应该只返回一个元素。所以你的代码应该是

{this.state.players.map(singlePlayer =>
   <div><Link to={'edit-player/' + singlePlayer.id}><li key={singlePlayer.id}>{singlePlayer.name}</li></Link>
   <a id={singlePlayer.id} onClick={this.handleDelete.bind(this)}>delete</a></div>
                                )}

Answer 2

问题是，你在map内返回多个项目，你不能返回多个元素，所以你需要将Link和a包裹起来div或li或任何其他元素。试试这个：

{this.state.players.map(singlePlayer => 
    <div>
        <Link to={'edit-player/' + singlePlayer.id}><li key={singlePlayer.id}>{singlePlayer.name}</li></Link>
        <a id={singlePlayer.id} onClick={this.handleDelete.bind(this)}>delete</a>
    </div>
)}

使用地图时出现反应错误

2 个答案: