Как мне создать массив объектов в компоненте класса React с помощью for l oop для отображения в функциональном компоненте?

Question

Я создал следующий компонент класса с помощью React:

Я хочу, чтобы объект daysArrayState содержал массив объектов, созданных с помощью функции стрелки addDay.

 state = {
    daysArray: []
}

days = () => {
    let daysArrayCopy = [];
    for(let i=1; i >= 35; i++){
        let id = Math.random();
        let num = i;
        let day = {
            dayId: id,
            dayNum: num
        }
        daysArrayCopy = [...this.state.daysArrayState, day];
        this.setState({daysArray: daysArrayCopy});
    }
}


render(){

    this.days();

    return(
        <div className="grid calendar-template">
            <div className="grid">Left</div>
            <div>
                <div className="grid text-center month-title">
                    January
                </div>
                <div>
                    <DayBox days = {this.state.daysArray}></DayBox>
                </div>
            </div>
            <div className="grid">Right</div>
        </div>
    )
}

У меня есть еще один функциональный компонент, который предназначен для сопоставления через объект daysArrayState:

const DayBox = ({days}) => {

const daysList = days.map(day => { 
    return(
        <div className="grid dayBox-template text-center" key={day.dayId}>
            {day.dayNum}
        </div>
    )
})

return(
    <div className="grid week-grid">
        {daysList}
    </div>
)    

Когда я пытаюсь сделать это, я получаю сообщение об ошибке, поскольку параметр, который я передаю, является функцией addDay, а не массивом объектов в daysArrayState.

Answer 1

Вот ваш основной компонент:

class App extends Component {
  state = {
    days: []
  };
  //call the function in this lifecycle method
  componentDidMount() {
    this.addDay();
  }
  //see the updated logic for your addDay
  addDay = () => {
    const daysArrayCopy = [];
    for (let i = 0; i <= 35; i++) {
      let id = Math.random();
      let num = i;
      let day = {
        dayId: id,
        dayNum: num
      };
      daysArrayCopy.push(day);
    }
    this.setState({ days: [...this.state.days, ...daysArrayCopy] });
  };

  render() {
    return (
      <div className="grid calendar-template">
        <div className="grid">Left</div>
        <div>
          <div className="grid text-center month-title">January</div>
          <div>
            <DayBox days={this.state.days} /> //pass the state here
          </div>
        </div>
        <div className="grid">Right</div>
      </div>
    );
  }
}

Вот ваш DayBox компонент:

export default function DayBox({ days }) {
  return (
    <div className="grid week-grid">
      {days.map(day => (
        <div key={day.dayId}>{day.dayNum}</div>
      ))}
    </div>
  );
}

Вот живая демонстрация: https://stackblitz.com/edit/react-zvzfwu?file=index.js