如何在反应 js 中获得价值

Question

我在 React js 中遇到问题，我想从 api 数据中获取员工 breaks 的价值，

API 数据

staff: [
  {
    "id": "1",
    "full_name": "Barbershop",
    "breaks": [
      {
        "starttime": "10:00:00",
        "endtime": "12:00:00"
      },
      {
        "starttime": "12:30:00",
        "endtime": "1:00:00"
      }
    ]
  }
]

反应组件数据

const getRowData = () => {
  return (
    this.state.staff &&
    this.state.staff.length &&
    this.state.staff.map(({ full_name,breaks }) => (
      <span className="more-space" key={full_name}>
        {id}
        {full_name}
        {breaks.start_date}   //this is not working
        {breaks.end_date}     //just show start_date or end_date
      </span>
    ))
  );
};

我应该对我的代码进行哪些更改？谁能帮帮我？

Answer 1

按照这个：

staff: [
  {
    "id": "1",
    "full_name": "Barbershop",
    "breaks": [
      {
        "starttime": "10:00:00",
        "endtime": "12:00:00"
      },
      {
        "starttime": "12:30:00",
        "endtime": "1:00:00"
      }
    ]
  }
]

第一：没有start_date

第二： breaks 是 array 而不是 object 所以 {breaks.start_date} 将不起作用，即使有带有该键的数据，您也需要使用索引或循环再来一遍

我认为你需要的是这样的：

// {breaks.start_date}
// {breaks.end_date}
{ breaks.map(brk => <p>{brk.starttime}-{brk.endtime}</p> ) }

Answer 2

this.state.staff.map((item) => {
  <span className="more-space" key={item.full_name}>
    {item.id} 
    {item.full_name} 
    {item.breaks.map((value) => {
      { value.starttime }
      { value.endtime }
    })}
  </span>
});

如果您需要访问下面的键，请添加除 value 之外的另一个变量

this.state.staff.map((item, key) => {})

Answer 3

There is no start_date and end_date inside breaks array

完整的工作示例

import React from 'react';

class Staffcomponent extends React.Component{
  constructor(props){
    super(props)
    this.staff= [
          {
            "id": "1",
            "full_name": "Barbershop",
            "breaks": [
              {
                "starttime": "10:00:00",
                "endtime": "12:00:00"
              },
              {
                "starttime": "12:30:00",
                "endtime": "1:00:00"
              }
            ]
          }
        ]
    this.state={staff:this.staff}
  }

  getRowData = () => {
       return (
             this.state.staff.map((item) => {
                  return (<span className="more-space" key={item.full_name}>
                            {item.id} 
                            {item.full_name} 
                             {item.breaks.map((break) => {
                                 return (<span>
                                        { break.starttime }
                                         { break.endtime }
                                         </span>)
                            })}

                         </span>)
                        })
                 );
};

  render(){
    return(
      <div>{this.getRowData()}</div>
    )
  }
}

function App() {
  return (
    <div className="App">
      <Staffcomponent/>
    </div>
  );
}

export default App;