[英]Why am I getting an error here? React Todo list
I am trying to create a todo list using React but i cant seem to understand why I am getting the error: "Warning: Cannot update during an existing state transition (such as within render
). Render methods should be a pure function of props and state."我正在尝试使用 React 创建一个待办事项列表,但我似乎无法理解为什么会出现错误:“警告:在现有的 state 转换期间无法更新(例如在
render
中)。渲染方法应该是纯 function 的道具和state。”
Here's the code:这是代码:
import React from 'react'
import ReactDOM from 'react-dom'
class Todo extends React.Component{
constructor(props){
super(props)
this.state = {
input: '',
list: []
}
this.handleChange = this.handleChange.bind(this)
this.reset = this.reset.bind(this)
this.removeItem = this.removeItem.bind(this)
this.add = this.add.bind(this)
}
add(){ //Adds a new task
const newItem = {
value: this.state.input,
id: Math.random + Math.random
};
const listed = [...this.state.list]
listed.push(newItem)
this.setState({
input: '',
list: listed
})
}
removeItem(id){ //deletes a task
const list = [...this.state.list]
const updatedList = list.filter(obj => {
return obj.id !== id
})
this.setState({
list: updatedList
})
}
handleChange(e){
this.setState({input: e.target.value})
}
reset(e){
e.preventDefault()
}
render(){
return (
<div>
<form action="" onSubmit={this.reset}>
<input type="text" value={this.state.input} placeholder='Enter a task..' onChange={this.handleChange} />
<button onClick={this.add}>Add Task</button>
{this.state.list.map(item => { //updates when a task is added or removed
return (
<div key={item.id}>
<h1>{item.value}</h1>
<button onClick={this.removeItem(item.id)}>X</button>
</div>
)
})}
</form>
</div>
)
}
}
ReactDOM.render(<Todo />,document.getElementById('root'))
Because you are calling removeItem on render.因为您在渲染时调用 removeItem 。 It needs to be wrapped in a separate function:
它需要被包裹在一个单独的 function 中:
<button onClick={() => this.removeItem(item.id)}>X</button>
So that you only call it onClick and not on render.所以你只称它为 onClick 而不是渲染。
<button onClick={this.removeItem(item.id)}>X</button>
In this button the event handler you have provided runs immediately due to the presents of the ()
at the end. <button onClick={this.removeItem(item.id)}>X</button>
在此按钮中,您提供的事件处理程序会立即运行,因为最后出现了()
。 To prevent this and still provide your argument item.id
you can enclose the handler this.removeItem(item.id)
with in another function.为了防止这种情况并仍然提供您的参数
item.id
,您可以将处理程序this.removeItem(item.id)
包含在另一个 function 中。 I like the arrow function for this so mine looks like this <button onClick={ ()=>this.removeItem(item.id) }>X</button>
.我喜欢这个箭头 function 所以我的看起来像这样
<button onClick={ ()=>this.removeItem(item.id) }>X</button>
。
Math.random + Math.random
is not returning a number like you would want for the element key. Math.random + Math.random
没有返回您想要的元素键的数字。 This is because your have neglected to include ()
at telling JS to run the function and return an int.这是因为您在告诉 JS 运行 function 并返回一个 int 时忽略了包含
()
。
After making these changes, I ran it in codepen.io and it seemed to work fine.进行这些更改后,我在 codepen.io 中运行它,它似乎工作正常。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.