反应处理事件

Question

简单的待办事项列表。我想添加一个删除功能但出现错误：

proxyConsole.js:56 警告：setState(...)：在现有状态转换期间无法更新（例如在 render 或其他组件的构造函数中）。渲染方法应该是 props 和 state 的纯函数；构造函数副作用是一种反模式，但可以移至componentWillMount。

当我试图掌握它时，我可能会弄乱绑定。

class App extends Component {
  constructor(props) {
    super(props);
     this.onDelete = this.onDelete.bind(this);
     this.state = {
     todos: ['wash up', 'eat some cheese', 'take a nap'],
  };
}

render() {
  var todos = this.state.todos;
  todos = todos.map(function(item, index){
   return(
     <TodoItem item={item} key={index} onDelete={this.onDelete}/>
  )
}.bind(this));

return (
  <div className="App">
    <ul>
      {todos}
    </ul>
  </div>
);
}

onDelete(item){
    var updatedTodos = this.state.todos.filter(function(val, index){
      return item !== val;
    });
    this.setState({
      todos:updatedTodos
    });
  }
}

class TodoItem extends Component {
  constructor(props) {
    super(props);
    this.handleDelete = this.handleDelete(this);

  }

  render(){
    return(
      <li>
        <div className="todo-item">
          <span className="item-name">{this.props.item}</span>
          <span className="item-delete" onClick={this.handleDelete}> x</span>
        </div>
      </li>
    );
  }

handleDelete(){
    this.props.onDelete(this.props.item);
  }
}

Answer 1

我认为您正在子组件的构造函数中调用 handleDelete 处理程序。应该是：

this.handleDelete = this.handleDelete.bind(this);

class App extends React.Component {
  constructor(props) {
    super(props);
    this.onDelete = this.onDelete.bind(this);
    this.state = {
      todos: ["wash up", "eat some cheese", "take a nap"]
    };
  }

  render() {
    var todos = this.state.todos;
    todos = todos.map(
      function(item, index) {
        return <TodoItem item={item} key={index} onDelete={this.onDelete} />;
      }.bind(this)
    );

    return (
      <div className="App">
        <ul>
          {todos}
        </ul>
      </div>
    );
  }

  onDelete(item) {
    var updatedTodos = this.state.todos.filter(function(val, index) {
      return item !== val;
    });
    this.setState({
      todos: updatedTodos
    });
  }
}

class TodoItem extends React.Component {
  constructor(props) {
    super(props);
    this.handleDelete = this.handleDelete.bind(this);
  }

  render() {
    return (
      <li>
        <div className="todo-item">
          <span className="item-name">{this.props.item}</span>
          <span className="item-delete" onClick={this.handleDelete}> x</span>
        </div>
      </li>
    );
  }

  handleDelete() {
    this.props.onDelete(this.props.item);
  }
}

ReactDOM.render(<App />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"/>