// render函数 render() { return ( <div className="TodoList"> <input value={this.state.inputValue} type="text" onChange={this.handleChange} /> <button onClick={this.handleClick}>add</button> <ul> { this.state.list.map((item, index) => { // get the index of list, any other great way to solve this? // return <li key={index} onClick={this.handleItemClick.bind(this, index)}>{item}</li> return <li key={index} onClick={this.handleItemClick(index)}>{item}</li> }) } </ul> </div> ); } // 点击删除函数 handleItemClick = (index) => { const list = [...this.state.list]; list.splice(index, 1); this.setState({ list: list }); }
如果使用箭头函数的方法,会在添加的时候瞬间删除,并且抛出index.js:1 Warning: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.的错误。
说是是由于引用的子组件,通过props进行传递了 ,传递的过程中实际上已经处于render阶段了 ,在这个阶段 如果你再改变这个state值的话,就会包这个错 。
请问有什么办法去解决?
抱歉 上面的格式错误 重新传一下代码片段
<ul>{ this.state.list.map((item, index) => { return <li key={index} onClick={this.handleItemClick(index)}>{item}</li> }) } </ul>