Arrays TypeError:无法读取属性'；名称'；react js中未定义的

我是新来的。问题是当我在map函数中传递数组对象时，它会抛出以下错误

这里是我定义数组对象的构造函数

constructor() {
    super();
    this.state = {
      data: [
        {
          name: "",
          completed: false,
        },
      ],
      checkValue: false,
    };
  }

现在我想知道实际的问题来自handleChange和handleSubmit函数，因为我不知道在这里到底写什么

handleChange = (e) => {
    e.preventDefault();

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

  handleSubmit = (e) => {
    e.preventDefault();

    this.setState({
      data: [...this.state.data, this.state.data.name],
    });
    e.target.reset();
  }; 

这是映射函数，我在其中映射了列表项和复选框、删除按钮（我只是在将输入保存到列表项数组中时遇到问题，这些复选框和删除按钮工作得很好）

render（）{
返回(
待办事项
^

{this.state.data.map（（数据，索引）=>{
返回(

{data.name}

this.handleDelete（索引）}
type=“按钮”
className=“关闭”
aria label=“关闭”
>
&时代；
);
})}

{this.state.data.length>0&&(
)}
{this.state.checkValue&&}

我知道上面的代码是不完整的，因为我只想知道如何在列表组中显示name元素，其他什么都不知道，所以忽略其余的代码

提前谢谢你

主页组件

import React, { Component, Fragment } from "react";
import Clear from "./clear";
import Display from "./display";

class MainPage extends Component {
  constructor() {
    super();
    this.state = {
      data: [
        {
          name: "",
          completed: false,
        },
      ],
      checkValue: false,
    };
  }

  handleChange = (e) => {
    e.preventDefault();

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

  handleSubmit = (e) => {
    e.preventDefault();

    this.setState({
      data: [...this.state.data, { name: e.target.value, completed: false }],
    });
    e.target.reset();
  };

  handleDelete = (index) => {
    const newList = [...this.state.data];
    newList.splice(index, 1);

    this.setState({ data: newList });
  };

  handleCheck = (e) => {
    e.preventDefault();
  };

  handleCheckChange = () => {
    const { checkValue } = this.state;

    this.setState({ checkValue: !checkValue });
  };

  render() {
    return (
      <Fragment>
        <h1 className="display-1 text-center" style={{ color: "#f7c6c6" }}>
          todos
        </h1>
        <form className="todo-form" onSubmit={this.handleSubmit}>
          <label className="label" onClick={this.handleCheck}>
            ^
          </label>
          <input
            autoFocus
            type="text"
            onChange={this.handleChange}
            className="new-todo shadow-lg p-3 mb-5 bg-white"
            placeholder="What needs to be done?"
          />
          <ul className="list-group">
            {this.state.data.map((data, index) => {
              return (
                <div key={"todo-" + index} className="div-list">
                  <input
                    className="check"
                    onChange={this.handleCheckChange}
                    type="checkbox"
                    style={{
                      cursor: "pointer",
                    }}
                    defaultChecked={this.state.data.completed}
                  />
                  <li
                    className="list-group-item disabled w-50 p-3 mx-auto"
                    style={{
                      textDecoration:
                        this.state.data.completed && "line-through",
                    }}
                  >
                    {data.name}
                  </li>
                  <button
                    onClick={() => this.handleDelete(index)}
                    type="button"
                    className="close"
                    aria-label="Close"
                  >
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
              );
            })}
          </ul>
          {this.state.data.length > 0 && (
            <Display noOfTodos={this.state.data.length} />
          )}
          {this.state.checkValue && <Clear />}
        </form>
      </Fragment>
    );
  }
}

export default MainPage;

import React, { Component } from "react";

class Display extends Component {
  render() {
    return (
      <div>
        <p className="para">{this.props.noOfTodos} items left</p>
        <button type="button" className=" all btn btn-light p-1 mr-3">
          All
        </button>
        <button type="button" className=" act btn btn-light p-1 mr-3">
          Active
        </button>
        <button type="button" className=" comp btn btn-light p-1">
          Completed
        </button>
      </div>
    );
  }
}

export default Display;

import React, { Component } from "react";

class Clear extends Component {
  render() {
    return (
      <button type="button" className="clr btn btn-light p-1">
        Clear completed
      </button>
    );
  }
}

export default Clear;

import React，{Component，Fragment}来自“React”；
从“/Clear”导入清除；
从“/Display”导入显示；
类主页扩展组件{
构造函数（）{
超级（）；
此.state={
数据：[
{
姓名：“，
已完成：错误，
},
],
checkValue:false，
};
}
handleChange=（e）=>{
e、 预防默认值（）；
this.setState（{name:e.target.value}）；
};
handleSubmit=（e）=>{
e、 预防默认值（）；
这是我的国家({
数据：[…this.state.data，{name:e.target.value，completed:false}]，
});
e、 target.reset（）；
};
handleDelete=（索引）=>{
const newList=[…this.state.data]；
新列表拼接（索引，1）；
this.setState（{data:newList}）；
};
handleCheck=（e）=>{
e、 预防默认值（）；
};
handleCheckChange=（）=>{
const{checkValue}=this.state；
this.setState（{checkValue:！checkValue}）；
};
render（）{
返回(
待办事项
^

{this.state.data.map（（数据，索引）=>{
返回(

{data.name}

this.handleDelete（索引）}
type=“按钮”
className=“关闭”
aria label=“关闭”
>
&时代；
);
})}

{this.state.data.length>0&&(
)}
{this.state.checkValue&&}
);
}
}
导出默认主页面；

显示组件

import React, { Component, Fragment } from "react";
import Clear from "./clear";
import Display from "./display";

class MainPage extends Component {
  constructor() {
    super();
    this.state = {
      data: [
        {
          name: "",
          completed: false,
        },
      ],
      checkValue: false,
    };
  }

  handleChange = (e) => {
    e.preventDefault();

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

  handleSubmit = (e) => {
    e.preventDefault();

    this.setState({
      data: [...this.state.data, { name: e.target.value, completed: false }],
    });
    e.target.reset();
  };

  handleDelete = (index) => {
    const newList = [...this.state.data];
    newList.splice(index, 1);

    this.setState({ data: newList });
  };

  handleCheck = (e) => {
    e.preventDefault();
  };

  handleCheckChange = () => {
    const { checkValue } = this.state;

    this.setState({ checkValue: !checkValue });
  };

  render() {
    return (
      <Fragment>
        <h1 className="display-1 text-center" style={{ color: "#f7c6c6" }}>
          todos
        </h1>
        <form className="todo-form" onSubmit={this.handleSubmit}>
          <label className="label" onClick={this.handleCheck}>
            ^
          </label>
          <input
            autoFocus
            type="text"
            onChange={this.handleChange}
            className="new-todo shadow-lg p-3 mb-5 bg-white"
            placeholder="What needs to be done?"
          />
          <ul className="list-group">
            {this.state.data.map((data, index) => {
              return (
                <div key={"todo-" + index} className="div-list">
                  <input
                    className="check"
                    onChange={this.handleCheckChange}
                    type="checkbox"
                    style={{
                      cursor: "pointer",
                    }}
                    defaultChecked={this.state.data.completed}
                  />
                  <li
                    className="list-group-item disabled w-50 p-3 mx-auto"
                    style={{
                      textDecoration:
                        this.state.data.completed && "line-through",
                    }}
                  >
                    {data.name}
                  </li>
                  <button
                    onClick={() => this.handleDelete(index)}
                    type="button"
                    className="close"
                    aria-label="Close"
                  >
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
              );
            })}
          </ul>
          {this.state.data.length > 0 && (
            <Display noOfTodos={this.state.data.length} />
          )}
          {this.state.checkValue && <Clear />}
        </form>
      </Fragment>
    );
  }
}

export default MainPage;

import React, { Component } from "react";

class Display extends Component {
  render() {
    return (
      <div>
        <p className="para">{this.props.noOfTodos} items left</p>
        <button type="button" className=" all btn btn-light p-1 mr-3">
          All
        </button>
        <button type="button" className=" act btn btn-light p-1 mr-3">
          Active
        </button>
        <button type="button" className=" comp btn btn-light p-1">
          Completed
        </button>
      </div>
    );
  }
}

export default Display;

import React, { Component } from "react";

class Clear extends Component {
  render() {
    return (
      <button type="button" className="clr btn btn-light p-1">
        Clear completed
      </button>
    );
  }
}

export default Clear;

import React，{Component}来自“React”；
类显示扩展了组件{
render（）{
返回(
{this.props.noOfTodos}项目剩余
全部的
活跃的
完整的
);
}
}
导出默认显示；

清除组件

import React, { Component, Fragment } from "react";
import Clear from "./clear";
import Display from "./display";

class MainPage extends Component {
  constructor() {
    super();
    this.state = {
      data: [
        {
          name: "",
          completed: false,
        },
      ],
      checkValue: false,
    };
  }

  handleChange = (e) => {
    e.preventDefault();

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

  handleSubmit = (e) => {
    e.preventDefault();

    this.setState({
      data: [...this.state.data, { name: e.target.value, completed: false }],
    });
    e.target.reset();
  };

  handleDelete = (index) => {
    const newList = [...this.state.data];
    newList.splice(index, 1);

    this.setState({ data: newList });
  };

  handleCheck = (e) => {
    e.preventDefault();
  };

  handleCheckChange = () => {
    const { checkValue } = this.state;

    this.setState({ checkValue: !checkValue });
  };

  render() {
    return (
      <Fragment>
        <h1 className="display-1 text-center" style={{ color: "#f7c6c6" }}>
          todos
        </h1>
        <form className="todo-form" onSubmit={this.handleSubmit}>
          <label className="label" onClick={this.handleCheck}>
            ^
          </label>
          <input
            autoFocus
            type="text"
            onChange={this.handleChange}
            className="new-todo shadow-lg p-3 mb-5 bg-white"
            placeholder="What needs to be done?"
          />
          <ul className="list-group">
            {this.state.data.map((data, index) => {
              return (
                <div key={"todo-" + index} className="div-list">
                  <input
                    className="check"
                    onChange={this.handleCheckChange}
                    type="checkbox"
                    style={{
                      cursor: "pointer",
                    }}
                    defaultChecked={this.state.data.completed}
                  />
                  <li
                    className="list-group-item disabled w-50 p-3 mx-auto"
                    style={{
                      textDecoration:
                        this.state.data.completed && "line-through",
                    }}
                  >
                    {data.name}
                  </li>
                  <button
                    onClick={() => this.handleDelete(index)}
                    type="button"
                    className="close"
                    aria-label="Close"
                  >
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
              );
            })}
          </ul>
          {this.state.data.length > 0 && (
            <Display noOfTodos={this.state.data.length} />
          )}
          {this.state.checkValue && <Clear />}
        </form>
      </Fragment>
    );
  }
}

export default MainPage;

import React, { Component } from "react";

class Display extends Component {
  render() {
    return (
      <div>
        <p className="para">{this.props.noOfTodos} items left</p>
        <button type="button" className=" all btn btn-light p-1 mr-3">
          All
        </button>
        <button type="button" className=" act btn btn-light p-1 mr-3">
          Active
        </button>
        <button type="button" className=" comp btn btn-light p-1">
          Completed
        </button>
      </div>
    );
  }
}

export default Display;

import React, { Component } from "react";

class Clear extends Component {
  render() {
    return (
      <button type="button" className="clr btn btn-light p-1">
        Clear completed
      </button>
    );
  }
}

export default Clear;

import React，{Component}来自“React”；
类清除扩展组件{
render（）{
返回(
清除已完成
);
}
}
导出默认清除；

基本上，您做错的是错误地访问数据数组和设置状态。我已经修复了这两个部分。 你的主页组件代码应该是这样的

import React, { Component, Fragment } from "react";
import Clear from "./clear";
import Display from "./display";

class MainPage extends Component {
  constructor() {
    super();
    this.state = {
      data: [
        {
          name: "first todo",
          completed: false
        }
      ],
      checkValue: false
    };
  }

  handleChange = (e) => {
    e.preventDefault();

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

  handleSubmit = (e) => {
    e.preventDefault();
    this.setState({
      data: [
        ...this.state.data,
        {
          name: this.state.name,
          completed: false
        }
      ]
    });
    e.target.reset();
  };

  handleDelete = (index) => {
    const newList = [...this.state.data];
    newList.splice(index, 1);
    this.setState({ data: newList });
  };

  handleCheck = (e) => {
    e.preventDefault();
  };

  handleCheckChange = () => {
    const { checkValue } = this.state;

    this.setState({ checkValue: !checkValue });
  };

  render() {
    console.log(this.state.data);
    return (
      <Fragment>
        <h1 className="display-1 text-center" style={{ color: "#f7c6c6" }}>
          todos
        </h1>
        <form className="todo-form" onSubmit={this.handleSubmit}>
          <label className="label" onClick={this.handleCheck}>
            ^
          </label>
          <input
            autoFocus
            type="text"
            onChange={this.handleChange}
            className="new-todo shadow-lg p-3 mb-5 bg-white"
            placeholder="What needs to be done?"
          />
          <ul className="list-group">
            {this.state.data.map((data, index) => {
              return (
                <div key={"todo-" + index} className="div-list">
                  <input
                    className="check"
                    onChange={this.handleCheckChange}
                    type="checkbox"
                    style={{
                      cursor: "pointer"
                    }}
                    defaultChecked={this.state.data.completed}
                  />
                  <li
                    className="list-group-item disabled w-50 p-3 mx-auto"
                    style={{
                      textDecoration:
                        this.state.data.completed && "line-through"
                    }}
                  >
                    {data.name}
                  </li>
                  <button
                    onClick={() => this.handleDelete(index)}
                    type="button"
                    className="close"
                    aria-label="Close"
                  >
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
              );
            })}
          </ul>
          {this.state.data.length > 0 && (
            <Display noOfTodos={this.state.data.length} />
          )}
          {this.state.checkValue && <Clear />}
        </form>
      </Fragment>
    );
  }
}

export default MainPage;

import React，{Component，Fragment}来自“React”；
从“/Clear”导入清除；
从“/Display”导入显示；
类主页扩展组件{
构造函数（）{
超级（）；
此.state={
数据：[
{
名称：“第一个待办事项”，
已完成：false
}
],
checkValue:false
};
}
handleChange=（e）=>{
e、 预防默认值（）；
this.setState（{name:e.target.value}）；
};
handleSubmit=（e）=>{
e、 预防默认值（）；
这是我的国家({
数据：[
…此.state.data，
{
名称：this.state.name，
已完成：false
}
]
});
e、 target.reset（）；
};
handleDelete=（索引）=>{
const newList=[…this.state.data]；
新列表拼接（索引，1）；
this.setState（{data:newList}）；
};
handleCheck=（e）=>{
e、 预防默认值（）；
};
handleCheckChange=（）=>{
const{checkValue}=this.state；
this.setState（{checkValue:！checkValue}）；
};
render（）{
console.log（this.state.data）；
返回(
待办事项
^

{this.state.data.map（（数据，索引）=>{
返回(