Question

嘿我正在尝试创建一个简单的待办事项列表，并添加了必要的组件。但是，标题{this.state.data.length}和TodoList {this.state.data}中的状态未更新。 Codepen和相关代码如下。

https://codepen.io/skasliwal12/pen/BREYXK

const TodoForm = ({addTodo}) => {
  let input;
  return (
    <div>
    <input ref={node => {input = node;}} />
    <button onClick={(e) => {
        e.preventDefault();
        addTodo(input.value);
        input.value='';
    }}> +
    </button>
    </div>
  );
};

const TodoList = ({todos}) => {
    let todoNodes = todos.map(todo => {
        return <li>{todo}</li>
    });
    return <div> {todoNodes} </div>;
}

const Title = ({todoCount}) => {
  return (
    <div>
      <div>
        <h1>To-do App {todoCount} items</h1>
      </div>
    </div>
  );
}

class TestApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data : [] }
  }

  addTodo(val) {
    let todo = {text: val}
    this.state.data.push(todo);
    this.setState = ({data: this.state.data});
    console.log('state updated?')
  }

  render(){
    return (
      <div>
        <Title todoCount={this.state.data.length}/>
        <TodoForm addTodo={this.addTodo.bind(this)}/>
        <TodoList todos={this.state.data}/>
      </div>
    );
  }
}

ReactDOM.render(<TestApp />, document.getElementById('root'));

Answer 1

很简单，重要的是你不要像你在这里那样改变状态

GIT_DISABLE_UNTRACKED_CACHE

很难调试并添加难以跟踪的副作用。按照您的方法，您应该将状态复制到var，更新该var，然后将其作为您所在州的新字段传递。哪个可行，但这也是我不推荐的。一般的好方法是根据旧状态计算新状态

this.state.data.push(todo);

这将解决您的问题并避免改变状态，这是您不应该做的事情，只使用// this.state.data.push(todo); You can remove this line this.setState(prevState => ({ data: prevState.data.concat(todo) }))方法更新状态。

我还更新了未正确显示的setState，您必须访问待办事项的TodoList字段才能显示内容。

text

https://codepen.io/anon/pen/MmRVmX?editors=1010

状态未在组件中更新

1 个答案: