javascript - 我的 React Js 任务列表项目中的第一个任务总是未定义

Question

我一直在创建一个 React js 项目，它是一个任务列表。但是我一直面临一个错误，由于某种原因我发现了多个错误。首先出于调试目的，我创建了一个句柄删除函数，它将一个字符串记录到控制台以显示它已被触发。它仅在单击任务元素上的 X 按钮时触发，但是，每当我提交文本输入以创建新任务时它都会触发。其次，最大的错误是无论我输入什么，第一个元素总是未定义的。我该如何解决这个问题。

import React, { Component } from "react";
import ReactDOM from "react-dom";
import TaskList from "./index2";

class Tests extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "",
      object: {},
      object2: [],
    };
    this.updateInputValue = this.updateInputValue.bind(this);
    this.submit = this.submit.bind(this);
  }

  updateInputValue(evt) {
    this.setState({
      value: evt.target.value,
    });
  }

  submit() {
    if (this.state.value.trim() != "") {
      this.setState({
        object: { task: this.state.value.trim(), id: Date.now },
        object2: [...this.state.object2, this.state.object],
        value: "",
      });
    } else {
      return;
    }
  }

  render() {
    return (
      <div>
        <label for="text">Text 1</label>
        <br />
        <input
          type="text"
          label="text"
          onChange={(evt) => this.updateInputValue(evt)}
          onSubmit={this.submit}
          value={this.state.value}
        />
        <br />
        <button onClick={this.submit} style={{ height: 50, width: 60 }}>
          Submit
        </button>
        <br></br>
        <TaskList
          allTasks={this.state.object2}
          handleDeleteFunction={console.log("handle delete has been triggered")}
        />
      </div>
    );
  }
}

export default Tests;

ReactDOM.render(<Tests />, document.getElementById("root")

);

还有我的任务列表代码

import React from "react";
import "./woah.css";

export default function TaskList({ allTasks, handleDeleteFunction }) {
  return (
    <ul>
      {allTasks.map(({ task, id }) => (
        <li key={id} id="task">
          <p>{task}</p>
          <button onClick={() => handleDeleteFunction}>X</button>
        </li>
      ))}
    </ul>
  );
}

标签： javascriptreactjs

Answer 1

尝试这个：

  submit() {
    if (this.state.value.trim() != "") {
      const newObj = { task: this.state.value.trim(), id: Date.now };
      this.setState({
        object: newObj,
        object2: [...this.state.object2, newObj],
        value: "",
      });
    } else {
      return;
    }
  }

您正在引用状态为空的当前对象。