类型错误：无法为我的 todoli 读取未定义的属性“推送”

Question

我试图让我的待办事项列表在页面上显示我的工作，但它不想显示所有这些错误。

我希望任务的用户输入显示为一个块 Cant 似乎弄清楚出了什么问题我查看了文本类型但那是正确的我不知道内容/用户输入是否没有被正确读取为字符串或什么.

class App extends Component {

  constructor(props) {

      super(props);

      this.state = {

          noteText: "",

          notes: []

      };

  }

  updateNoteText(noteText) {

      this.setState({ noteText: noteText.target.value });

  }

  addNote() {

      if (this.state.noteText === "") {

          return;

      }

      let notesArr = this.notes;

      notesArr.push(this.state.noteText);

      this.setState({ noteText: "" });

      this.textInput.focus();

  }

  handlekeyPress = event => {

      if (event.key === "Enter") {}

  };

  deleteNote(index) {

      let notesArr = this.state.notes;

      notesArr.splice(index, 1);

      this.setState({ notes: notesArr });

  }

  render() {

      let notes = this.state.notes.map((val, key) => {

          return (

              <Todo key={key} text={val} deleteMethod={() => this.deleteNote(key)} />

          );

      });

      return (

          <div className="container">

          <div className="header">React Todo List</div>

          <div className="btn" onClick={this.addNote.bind(this)}>

            +

          </div>

          {notes}

          <input

            type="text"

            ref={input => {

              this.textInput = input;

            }}

            className="textInput"

            value={this.state.noteText}

            onChange={noteText => this.updateNoteText(noteText)}

            onKeyPress={this.handlekeyPress.bind(this)}

          />

        </div>

      );

  }

}

export default App;

Answer 1

您应该绑定this或使用箭头函数，并且正如@Rob 所说，您的代码中有一个小错误。所以，只是改变这一行addNote() {来addNote = () => {，并deleteNote(index) {以deleteNote = (index) => {

Answer 2

我认为这应该是：&nbsp;let&nbsp;notesArr&nbsp;=&nbsp;this.state.notes;而不是&nbsp;let&nbsp;notesArr&nbsp;=&nbsp;this.notes;字面意思是 this.notes 是未定义的。