Question

我已经做了反应的待办事项列表，但是当我提交新条目时，它不会显示在列表中。我不知道问题出在哪里。

class TodoList extends React.Component {
  constructor(){
    super();

此数组不会像它应该更新：

    this.state ={
      items:["item1", "item2"]
    };
  }

这里我添加了新任务：

  addTask = (task) => {
this.setState((prevState) => ({
  items: prevState.items.concat([task])
}));


}

  render(){
    return(
      <div>
        <AddTodo addNew ={this.addTask}/>
        <ShowEntries entries={this.state.items}/>
      </div>
    )
  }
}

class AddTodo extends React.Component {
  constructor(){
    super();
this.handeAddNew = this.handeAddNew.bind(this);
    this.state ={
      task: ""
    };
  }

这里我更新状态，它运行正常：

  update(e){
    this.setState({
      task: e.target.value
    });
  }

这里我已经将addTask函数作为prop传递。这可能是问题所在？

  handeAddNew(){
    this.props.addNew(this.state.task);
    this.setState({
      task: ""
    });
  }

  render(){
    return(
      <div>
        <input type="text"
        onChange={this.update.bind(this)}></input>
        <button onClick={this.handleAddNew}>Add</button>
      </div>
    )
  }
}

ShowEntries类也可以正常工作：

class ShowEntries extends React.Component{
  render(){
    var list =this.props.entries.map((task) =>{
      return <li>{task}</li>
    });
    return(
      <div>
        <ul>
          {list}
        </ul>
      </div>
    )
  }
}

export default TodoList

有什么想法吗？

Answer 1

你应该绑定addTask函数。

library(data.table)

d <- mtcars
setDT(d)
filtering_condition <- "cyl==6"
d[eval(parse(text=filtering_condition))]

或者将addTask更改为箭头功能。像

constructor(){
  super();
  this.addTask = this.addTask.bind(this);
}

handleAddNew也需要绑定。

addTask = (task) => {
  /* add task*/
}

Answer 2

如果依靠先前的状态来更新下一个状态，则必须在React中使用functional setState，如下所示：

  addTask = (task) => {
    this.setState((prevState) => ({
      items: prevState.items.concat([task])
    }));
  }

这与绑定所有使用的函数（最好是在构造函数本身内）一起解决你的问题。

Answer 3

你拼错了handeAddNew。

使其handleAddNew也确保绑定方法handleAddNew = () => { //code }

React Array在向其添加项目时不会更新

3 个答案: