关于箭头函数

来源:2-3 实现列表项的删除功能

jessbae

2020-07-27 12:14

// 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值的话,就会包这个错 。

请问有什么办法去解决?

写回答 关注

1回答

  • jessbae
    2020-07-27 12:16:52

    抱歉 上面的格式错误 重新传一下代码片段

    <ul>{
                this.state.list.map((item, index) => {
                   return <li key={index} onClick={this.handleItemClick(index)}>{item}</li>            
                 })          
        }        
    </ul>


React16.4 快速上手

结合实例带你快速入门React16基础语法,并完成Todolist功能开发。

40002 学习 · 134 问题

查看课程

相似问题