为了账号安全,请及时绑定邮箱和手机立即绑定

我就想知道为啥跑不起来,在点击add的时候总是报错,错误信息如下,求解答

import React from 'react';


class TodoList extends React.Component {

  constructor(props){

    super(props);

    this.state = {

      list: [],

      inputValue: ''

    }

    this.handleBtnClick = this.handleBtnClick.bind(this);

    this.handleInput = this.handleInput.bind(this);

    this.handleItemClick = this.handleItemClick.bind(this);

  }

  handleInput(e){

    this.setState({

      inputValue: e.target.value

    })

  }

  handleBtnClick(){

    this.setState({

      list: [...this.state.list, this.state.inputValue],

      inputValue: ''

    })

  }

 

  handleItemClick(index){

    const list = [...this.state.list];

    list.splice(index, 1);

    this.setState({list});

  }


  render() {

    return (

      <div>

        <div>

          <input value={this.state.inputValue} onChange={this.handleInput}/>

          <button onClick={this.handleBtnClick}>add</button>

        </div>

        <ul>

          {

            this.state.list.map((item, index) => {

              return (

               <li key={index} onClick={this.handleItemClick(index)}>{item}</li>

              )

            })

          }

        </ul>

      </div>

    );

  }

}


export default TodoList;


报错信息:Warning: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.


正在回答

1 回答

onClick={this.handleItemClick(index)} 改成 onClick={() => this.handleItemClick(index)}

0 回复 有任何疑惑可以回复我~
#1

慕粉3251138

使用map遍历数据列表的时候,光在构造函数绑定this(this.handleItemClick = this.handleItemClick.bind(this);)还不行,onClick={this.handleItemClick(index)} 除了改成 onClick={() => this.handleItemClick(index)},还可以改成onClick={this.handleItemClick.bind(this)}
2019-03-27 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

我就想知道为啥跑不起来,在点击add的时候总是报错,错误信息如下,求解答

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信