Javascript “Email”和'；电话'；在“联系人”中标记为必需，但其值为“未定义”`

这是我的app.js文件：-

import React, { Component } from "react";
import Contacts from "./components/Contacts";
import Header from "./components/Header";

import "bootstrap/dist/css/bootstrap.min.css";
import "./App.css";

class App extends Component {
  render() {
    return (
      <div className="App">
        <Header branding="Contact Manager" />
        <div className="container">
          <Contacts />
        </div>
      </div>
    );
  }
}

export default App;

import React，{Component}来自“React”；
从“/components/Contacts”导入联系人；
从“/components/Header”导入标题；
导入“bootstrap/dist/css/bootstrap.min.css”；
导入“/App.css”；
类应用程序扩展组件{
render（）{
返回(
);
}
}
导出默认应用程序；

我的Contacts.js文件如下：-

import React, { Component } from "react";
import Contact from "./Contact";

class Contacts extends Component {
  constructor() {
    super();
    this.state = {
      contacts: [
        {
          id: 1,
          name: "John Doe",
          email: "jdoe@gmail.com",
          phone: "555-555-5555"
        },
        {
          id: 2,
          name: "Jay Smith",
          email: "jSmith@gmail.com",
          phone: "555-555-5556"
        },
        {
          id: 3,
          name: "Gary Gray",
          email: "Ggray@gmail.com",
          phone: "555-555-5557"
        }
      ]
    };
  }
  render() {
    const { contacts } = this.state;
    return (
      <div>
        {contacts.map(contact => (
          <Contact
            name={contact.name}
            email={contact.email}
            phone={contact.phone}
          />
        ))}
      </div>
    );
  }
}

export default Contacts;

import React，{Component}来自“React”；
从“/Contact”导入联系人；
类联系人扩展组件{
构造函数（）{
超级（）；
此.state={
联系人：[
{
id:1，
姓名：“约翰·多伊”，
电子邮件：“jdoe@gmail.com",
电话：“555-555-5555”
},
{
id:2，
姓名：“杰伊·史密斯”，
电子邮件：“jSmith@gmail.com",
电话：“555-555-5556”
},
{
id:3，
姓名：“加里·格雷”，
电子邮件：“Ggray@gmail.com",
电话：“555-555-5557”
}
]
};
}
render（）{
const{contacts}=this.state；
返回(
{contacts.map（contact=>(
))}
);
}
}
导出默认联系人；

因此，我正在我的App.js中导入我的Contacts.js，代码编译成功，但它不会返回电子邮件和电话选项，只返回name。但是，当我转到控制台窗口时，它会显示：prop

Email

和“Phone”在

Contacts

中标记为所需，但其值是

未定义的。我应该纠正什么？
这对我很有效

检查这个

类联系人扩展了React.Component{
render（）{
让{name，email，phone}=this.props；
返回(
{name}
{email}
{电话}
------------------
);
}
}
类Hello扩展了React.Component{
构造函数（）{
超级（）；
此.state={
联系人：[
{
id:1，
姓名：“约翰·多伊”，
电子邮件：“jdoe@gmail.com",
电话：“555-555-5555”
},
{
id:2，
姓名：“杰伊·史密斯”，
电子邮件：“jSmith@gmail.com",
电话：“555-555-5556”
},
{
id:3，
姓名：“加里·格雷”，
电子邮件：“Ggray@gmail.com",
电话：“555-555-5557”
}
]
};
}
render（）{
const{Contacts}=this.state；
返回(
{Contacts.map（contact=>(
))}
);
}
}
ReactDOM.render(
,
document.getElementById（'容器'）
);

尝试将联系人的状态声明更改为与您的类名联系人不同的内容（例如联系人）。谢谢。我就是这么做的，只是把我的contacts.js改为contact.js，并再次声明了所有内容。在那之后，它工作得很好。谢谢你！！是的，我知道我做错了什么！！我有一个contact.js文件和一个contacts.js文件。我是从contact.js导入的，其中没有声明电子邮件和电话。非常感谢。
class Contact  extends React.Component{

      render() {
          let { name, email, phone } = this.props;
        return (
            <div>
              <div>{name}</div>
              <div>{email}</div>
              <div>{phone}</div>
              <div>------------------</div>
          </div>
        );
      }
    }

    class Hello extends React.Component {
         constructor() {
        super();
        this.state = {
          Contacts: [
            {
              id: 1,
              name: "John Doe",
              email: "jdoe@gmail.com",
              phone: "555-555-5555"
            },
            {
              id: 2,
              name: "Jay Smith",
              email: "jSmith@gmail.com",
              phone: "555-555-5556"
            },
            {
              id: 3,
              name: "Gary Gray",
              email: "Ggray@gmail.com",
              phone: "555-555-5557"
            }
          ]
        };
      }
      render() {
        const { Contacts } = this.state;
           return (
          <div>
            {Contacts.map(contact => (
              <Contact
                name={contact.name}
                email={contact.email}
                phone={contact.phone}
              />
            ))}
          </div>
        );
      }
    }

    ReactDOM.render(
      <Hello name="World" />,
      document.getElementById('container')
    );