不能添加到ReactJS的项目列表中

Question

自从我使用ReactJS以来已经有一段时间了，我需要创建一个可以添加和删除的项目列表。我在我的li中添加了一个onClick事件来删除它。我也有一个按钮来添加新项目，这些似乎工作，但状态不更新。

var new_items = [...Array(1)].map((val, i) => `No Items`);
<ul className="App-list">
{new_items.map((item, i) => (<li key={`item_${i}`} onItemClick={onItemClick(i)}>{ item }</li>))}
</ul> 

onClick函数在这里

function onItemClick(num) {
this.setState({
new_items: this.state.new_items.concat('new value')
})
}

我只需要从列表中删除一行或根据状态添加，但即使它运行它也不更新状态。有人能给我一个更好的方式更新行动态列表或告诉我我做错了什么。

Answer 1

您需要按如下方式添加构造函数:

class MyClassName {
constructor(props) {
super(props);
this.state = {
new_items: [] // or null or any other initial value depending on your use case
}
this.onItemClick = this.onItemClick.bind(this);
}
function onItemClick(num){ ... }
}

调用onClick函数时，按如下方式调用:

onItemClick={this.onItemClick(i)}

同样，如果您使用的是通用的onClick功能，则必须将onItemClick更改为onClick:

<li key={`item_${i}`} onClick={()=>this.onItemClick(i)}>

由于您没有使用来自单击的事件信息，因此必须添加一个调用所需onClick处理程序的匿名函数。因此()=>this.onItemClick(i)

Answer 2

由于你使用的是类组件，所以你必须在类

的上下文中调用该方法。

onItemClick={this.onItemClick(i)}