Question

我遇到错误：

TypeError：无法读取未定义的属性'is24HourCheckin' 在employeelist.component.js：28

我的答复是-

&& sed -i 's/^Listen 80$/Listen 0.0.0.0:80/' /etc/apache2/httpd.conf

JS功能

{
  "Success": 1,
  "allemployeeslist": [
    {
      "employeeUnder": [],
      "createdTime": 1559902701,
      "isactive": true,
      "usertype": "Employee",
      "_id": "5cfa492e3cd90a0017cde1a4",
      "email": "NA",
      "pass": "rishabh20",
      "name": "Rishabh",
      "username": "Rishabh",
      "employee_id": "MN1090",
      "doj": "2015-02-09",
      "associatedDept": {
        "isactive": true,
        "_id": "5d0223f5fb6fc00e79a8d153",
        "companyId": "5cf7fba0265a1100176c1c82",
        "departmentName": "Sales",
        "createdDate": 1558615880,
        "__v": 0
      },
      "phone": "8527579800",
      "associatedCompany": {
        "is24HourCheckin": true,
        "isLeaveManagementAllowed": true,
        "timeInterval": 15,
        "distanceTravel": 300,
        "_id": "5cf7fba0265a1100176c1c82",
        "companyName": "mynukad IT Solutions",
        "companyLogo": "http://mynukad.com/img/logo.png",
        "ownerName": "Pranav Choudhary",
        "ownerPhone": "9650050610",
        "ownerAddress": "B-71, Sector 67 Noida, 201301",
        "__v": 0
      },
      "designation": "Sales Manager",
      "__v": 0
    },
    {
      "employeeUnder": [],
      "createdTime": 1560155049,
      "isactive": true,
      "usertype": "Employee",
      "_id": "5cfe13d1bd66881a700f180f",
      "email": "satyam@gmail.com",
      "pass": "123456",
      "name": "Satyam",
      "username": "NA",
      "employee_id": "6600",
      "doj": "2015-02-09",
      "phone": "4523953001",
      "designation": "SALES MANAGER",
      "associatedCompany": {
        "is24HourCheckin": false,
        "isLeaveManagementAllowed": true,
        "timeInterval": 15,
        "distanceTravel": 300,
        "_id": "5cf91176ee51a51d4c42a1c8",
        "companyName": "Tests 6 Software",
        "ownerName": "jkl",
        "ownerPhone": "7523953001",
        "ownerAddress": "Kanpur",
        "userLimitations": 1,
        "__v": 0
      },
      "__v": 0
    }
  ]
}

我想在关联公司内部显示comapanyName。

componentDidMount() { fetch('/allemployeeslist').then(getresponse => { return getresponse.json(); }).then(data => { console.log(data.allemployeeslist); let allempFromApi = data.allemployeeslist.map(team => { return { empname: team.name, empid: team.employee_id, empdept: data.allemployeeslist.associatedCompany.companyName, empdesig: team.designation } }) this.setState({allemployeeslist: allempFromApi}); }).catch(error => { console.log(error); }); }方法中的代码应该是什么。我正在使用GET方法。

我想要一些控制台输出。 -

componentDidMount() // ABC

Answer 1

allemployeeslist是一个数组，因此您无法像使用对象一样使用点语法来获取companyName。

您可以在数组上映射以获取如下的公司名称数组：

const companyNames = data
  .allemployeeslist
  .map(emp => emp.associatedCompany.companyName)

console.log(companyNames) // ["mynukad IT Solutions", "Tests 6 Software"]

从注释中的 componentDidMount 代码看来，您可能只需要将data.allemployeeslist.associatedCompany.companyName更改为team.associatedCompany.companyName：

componentDidMount() {
  fetch('/allemployeeslist')
    .then(getresponse => {
      return getresponse.json()
    })
    .then(data => {
      let allempFromApi = data.allemployeeslist.map(team => {
        return {
          empname: team.name,
          empid: team.employee_id,
          empdept: team.associatedCompany && team.associatedCompany.companyName, // "empdept" will be undefined if no associatedCompany
          empdesig: team.designation
        }
      })
      this.setState({
        allemployeeslist: allempFromApi
      })
    })
    .catch(error => {
      console.log(error)
    })
}

如何在React JS中的json数组中打印值？

1 个答案: