Question

我一直在尝试在React中列出一个待办事项清单，以应用我所学到的知识，但是我似乎无法使其工作。下面是代码：

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";
class TodoForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { todos: [" test "], add: "Text" };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleChange(event) {
    this.setState({ add: event.target.value });
  }
  handleSubmit(event) {
    this.setState({ todos: this.state.todos.push(this.state.add) });
    event.preventDefault();
  }
  render() {
    return (
      <div>
        <form name="todo-list" onSubmit={this.handleSubmit}>
          <input type="text" name="todo-input" value={this.state.add} onChange={this.handleChange} />
          <input type="submit" text="Add" />
        </form>
        <ul>
          {this.state.todos.map(item => (
            <li key={item}>{item}</li>
          ))}
        </ul>
      </div>
    );
  }
}
function App() {
  return (
    <div className="App">
      <TodoForm />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

我希望输入一个值，然后单击“提交”，它将把该值添加到列表中，最好不进行重新加载，但目前我想要的只是使其起作用。我认为这与添加到数组有关，因为map函数显示虚拟的“ test”值。

我本来没有handleChange，但是尝试添加它，以使用文本字段值不断更新add变量，然后使用setState按提交将其添加到todos变量时。我已尽力想尽一切办法，将非常感谢您的帮助！

Answer 1

问题出在下一个方法中：

handleSubmit(event) {
  this.setState({ todos: this.state.todos.push(this.state.add) });
  event.preventDefault();
}

this.state.todos.push(this.state.add)返回数组的新长度，而不是数组本身。因此，为了解决此问题，我们可以使用解构。我们用它代替：

[...this.state.todos, this.state.add]

将返回一个包含旧值和新值的新数组。

或者，如果您不想使用解构，则可以执行以下操作：

this.state.todos.concat(this.state.add)

Answer 2

这行是cuplrit：

todos: this.state.todos.push(this.state.add)

Array.push()返回数组的新长度，因此它将是number，因此this.state.todos不再是数组，因此破坏了UI。

您可以改为：

todos: [...this.state.todos, this.state.add]

此Reat Todo列表有什么问题？

2 个答案: