在 React.js 中映射多个数组

Question

我正在努力实现这一点：

在尝试时，我创建了一个 JavaScript 对象（JSON 类对象）来访问它。这是代码：

const weekArray = [
  {
    weekMonth: 'February',
    weekDayofWeek: ['Thur', 'Thur', 'Thur', 'Thur'],
    weekDays: [ '04', '11', '18', '25'],
    weekStatus: 'Available +',
    className: 'February'
  },
  
  {
    weekMonth: 'March',
    weekDayofWeek: ['Thur', 'Thur', 'Thur', 'Thur'],
    weekDays: [ '04', '11', '18', '25'],
    weekStatus: 'Available +',
    className: 'March'
  },
  
  {
    weekMonth: 'April',
    weekDayofWeek: ['Thur', 'Thur', 'Thur', 'Thur', 'Thur'],
    weekDays: [ '01', '08', '15', '22', '29' ],
    weekStatus: 'Available +',
    className: 'April'
  },
  
  {
    weekMonth: 'May',
    weekDayofWeek: ['Thur', 'Thur', 'Thur', 'Thur'],
    weekDays: [ '06', '13', '20', '27' ],
    weekStatus: 'Available +',
    className: 'May'
  }
];

const WeekShow = () => {
  return (
    <React.Fragment>
    <div className="container">
      <div className="row">
      <div className="col-md-4 col-sm-4 col-xs-4">
      {weekArray.map((weekValues) => (
        <div key={weekValues.className}>
          <span>{weekValues.weekMonth}</span>
          <div className="card">
            <h5>{weekValues.weekDayofWeek}</h5>
            <h5>{weekValues.weekDays}</h5>
            <h5>{weekValues.weekStatus}</h5>
          </div>
        </div>
      ))}
      </div>
      </div>
     </div>
    </React.Fragment>
  );
}

ReactDOM.render(
  <WeekShow />,
  root
);

span {
  margin-right: 10px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>

现在，我试图访问目标文件中的每个数据以获得图像中显示的所需结果，但效果不佳。不要介意样式，我只想关注主要内容objective。可能是什么错误？请检查并提供帮助！

Answer 1

你应该再次循环 .weekDayofWeek :)

const renderWeekDayofWeek = ({weekDayofWeek, weekDays, weekStatus}) => {
  return weekDayofWeek.map((r, index) => (
    <div className="card" key={index}>
    <h5>{r}</h5>
    <h5>{weekDays[index]}</h5>
    <h5>{weekStatus}</h5>
  </div>
));
}

像下面这样调用 renderWeekDayofWeek()：

 {weekArray.map((weekValues) => (
      <div key={weekValues.className}>
        <span>{weekValues.weekMonth}</span>
        {renderWeekDayofWeek(weekValues)}
      </div>
    ))}

const weekArray = [
  {
    weekMonth: 'February',
    weekDayofWeek: ['Thur', 'Thur', 'Thur', 'Thur'],
    weekDays: [ '04', '11', '18', '25'],
    weekStatus: 'Available +',
    className: 'February'
  },
  
  {
    weekMonth: 'March',
    weekDayofWeek: ['Thur', 'Thur', 'Thur', 'Thur'],
    weekDays: [ '04', '11', '18', '25'],
    weekStatus: 'Available +',
    className: 'March'
  },
  
  {
    weekMonth: 'April',
    weekDayofWeek: ['Thur', 'Thur', 'Thur', 'Thur', 'Thur'],
    weekDays: [ '01', '08', '15', '22', '29' ],
    weekStatus: 'Available +',
    className: 'April'
  },
  
  {
    weekMonth: 'May',
    weekDayofWeek: ['Thur', 'Thur', 'Thur', 'Thur'],
    weekDays: [ '06', '13', '20', '27' ],
    weekStatus: 'Available +',
    className: 'May'
  }
];
const renderWeekDayofWeek = ({weekDayofWeek, weekDays, weekStatus}) => {
    return weekDayofWeek.map((r, index) => (
      <div className="card" key={index}>
      <h5>{r}</h5>
      <h5>{weekDays[index]}</h5>
      <h5>{weekStatus}</h5>
    </div>
    ));
  }

  const WeekShow = () => {
    return (
      <React.Fragment>
      <div className="container">
        <div className="row">
        <div className="col-md-4 col-sm-4 col-xs-4">
        {weekArray.map((weekValues) => (
          <div key={weekValues.className}>
            <span>{weekValues.weekMonth}</span>
            {renderWeekDayofWeek(weekValues)}
          </div>
        ))}
        </div>
        </div>
       </div>
      </React.Fragment>
    );
  }
  

ReactDOM.render(
  <WeekShow />,
  root
);

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>

Answer 2

我想建议更改 weekArray 的形状，这样更容易呈现并且每周可以处理不同的状态。

在拳头维度会有几个月（就像现在一样）。我建议每个月都有一个包含每周数据的 week 数组。

const monthsArray = [
    {
        month: 'February',
        className: 'February',
        weeks: [
            {
                day: '04',
                dayofWeek: 'Thur',
                status: 'Available +',
            },
            {
                day: '11',
                dayofWeek: 'Thur',
                status: 'Available +',
            },
            {
                day: '18',
                dayofWeek: 'Thur',
                status: 'Available +',
            },
            {
                day: '25',
                dayofWeek: 'Thur',
                status: 'Available +',
            },
        ]
    },
    {
        month: 'March',
        className: 'March',
        weeks: [
            {
                day: '04',
                dayofWeek: 'Thur',
                status: 'Available +',
            },
            {
                day: '11',
                dayofWeek: 'Thur',
                status: 'Available +',
            },
            {
                day: '18',
                dayofWeek: 'Thur',
                status: 'Available +',
            },
            {
                day: '25',
                dayofWeek: 'Thur',
                status: 'Available +',
            },
        ]
    },
    {
        month: 'April',
        className: 'April',
        weeks: [
            {
                day: '01',
                dayofWeek: 'Thur',
                status: 'Available +',
            },
            {
                day: '08',
                dayofWeek: 'Thur',
                status: 'Not Available',
            },
            {
                day: '15',
                dayofWeek: 'Thur',
                status: 'Available +',
            },
            {
                day: '22',
                dayofWeek: 'Thur',
                status: 'Available +',
            },
            {
                day: '28',
                dayofWeek: 'Thur',
                status: 'Available +',
            },
        ]
    },
    {
        month: 'May',
        className: 'May',
        weeks: [
            {
                day: '06',
                dayofWeek: 'Thur',
                status: 'Available +',
            },
            {
                day: '13',
                dayofWeek: 'Thur',
                status: 'Available +',
            },
            {
                day: '20',
                dayofWeek: 'Thur',
                status: 'Not Available',
            },
            {
                day: '27',
                dayofWeek: 'Thur',
                status: 'Available +',
            },
        ]
    },
];

const WeekShow = () => {
    return (
        <React.Fragment>
            <div className="container">
                <div className="row">
                    <div className="col-md-4 col-sm-4 col-xs-4">
                        {monthsArray.map((monthValues) => (
                            <div key={monthValues.month}>
                                <span>{monthValues.month}</span>
                                {monthValues.weeks.map((weekValues) => (
                                    <div key={weekValues.day} className="card">
                                        <h5>{weekValues.dayofWeek}</h5>
                                        <h5>{weekValues.day}</h5>
                                        <h5>{weekValues.status}</h5>
                                    </div>
                                ))}
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </React.Fragment>
    );
}

ReactDOM.render(
    <WeekShow />,
    root
);

span {
    margin-right: 10px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>

在 React.js 中映射多个数组

Mapping multiple Array in React.js

javascript

mapping

ecmascript-6

reactjs