Невозможно пройти через все столбцы таблицы Reactjs

Question

Я создал таблицу, используя семантические реакции.Эта таблица имеет заголовок и подзаголовок.Подзаголовок имеет 6 столбцов с каждой ячейкой, содержащей даты текущей недели.Я делаю вызов API, чтобы получить объект даты и на основе ответа я хочу сравнить полученную дату с датой в заголовке, если она совпадает, я хочу заполнить эту соответствующую ячейку значением, если она не совпадает, яхочу заполнить другим значением.

Если вы видите скриншот, я хочу ввести эти значения для каждого имени и всех дат.

import React, {Component} from 'react'
import { Icon, Table } from 'semantic-ui-react'
import moment from 'moment'

class MyComponent extends Component {

render(){
  let myList = this.props.myList
  let today = moment()
    return(
        <Table celled structured id="table">
        <Table.Header>
          <Table.Row>
            <Table.HeaderCell rowSpan='2' 
   textAlign='center'>Name</Table.HeaderCell>
            <Table.HeaderCell colSpan='6' 
   textAlign='center'>Dates</Table.HeaderCell>
          </Table.Row>
          <Table.Row textAlign='center'>
            <Table.HeaderCell>{moment().day(1).format('DD-MM')} . 
  </Table.HeaderCell>
            <Table.HeaderCell>{moment().day(2).format('DD-MM')} . 
  </Table.HeaderCell>
            <Table.HeaderCell>{moment().day(3).format('DD-MM')} . 
 </Table.HeaderCell>
            <Table.HeaderCell>{moment().day(4).format('DD-MM')} . 
 </Table.HeaderCell>
            <Table.HeaderCell>{moment().day(5).format('DD-MM')} . 
 </Table.HeaderCell>
            <Table.HeaderCell>{moment().day(6).format('DD-MM')} . 
 </Table.HeaderCell>
          </Table.Row>
        </Table.Header>

        <Table.Body>
          {Object.keys(myList).map(function(key){
            return(
              <Table.Row>
                <Table.Cell>{key}</Table.Cell>

                { myList[key].map(function(object){
                  if(today.isAfter(object.requiredDate)){
                          let table = document.getElementById('table')
                          let requiredDate = 
moment(object.givenDate).format('DD-MM')
                          for(let i = 0 ; i < 
table.rows[1].cells.length; i++){
                                let headerDate = 
table.rows[1].cells[i].innerText
                                  if(requiredDate !== headerDate){
                                    <Table.Cell  textAlign='center'>
                                      <Icon name='question'>
                                      </Icon>
                                      </Table.Cell>
                                    }
                                else{
                                    if(object.state === 'P'){
                                     return(
                                     <Table.Cell>
                                            <Icon color='green' 
         name='check' size='large'/>
                                            {object.state}
                                            </Table.Cell>
                                     )
                                    } else {
                                        return(
                                          <Table.Cell>
                                              <Icon color='red' 
           name='close' size='large' />
                                              {object.state}
                                              </Table.Cell>
                                        )
                                      }
                                }

                            }
                          }
                  })
                }

                </Table.Row>
              )
            })}
        </Table.Body>
      </Table>

    )
  }
 }


export default MyComponent

Я перепробовал все, что мог придумать, но он вводил значение только в первом столбце для всех записей.

Любая помощь очень ценится.

myList Объект выглядит следующим образом,

Спасибо, Викрам

Answer 1

1. Вы не должны сравнивать значения вашего объекта с innerText некоторых элементов ячейки таблицы
2. requiredDate НЕ существует в object в вашей итерации объекта
3. Ваш myListФормат объекта странный, я прикрепляю мой в data.js

// MyComponent.js
import React, { Component } from 'react'
import 'semantic-ui-css/semantic.min.css'
import { Icon, Table } from 'semantic-ui-react'
import moment from 'moment'

const dates = Array(6).fill().map((e, i) => moment().day(i+1).format('DD-MM')) 

class MyComponent extends Component {

    render() {
        let myList = this.props.myList
        let today = moment()
        return (
            <Table celled structured id="table">
                <Table.Header>
                    <Table.Row>
                        <Table.HeaderCell rowSpan='2' textAlign='center'>Name</Table.HeaderCell>
                        <Table.HeaderCell colSpan='6' textAlign='center'>Dates</Table.HeaderCell>
                    </Table.Row>
                    <Table.Row textAlign='center'>
                        {dates.map((s, i) => <Table.HeaderCell key={i}>{s}</Table.HeaderCell>)}
                    </Table.Row>
                </Table.Header>

                <Table.Body>
                    {Object.keys(myList).map(function (key, j) {
                        return (
                            <Table.Row key={j}>
                                <Table.Cell>{key}</Table.Cell>

                                {myList[key].map(function (object) {
                                    console.log(object)
                                    let requiredDate = moment(object.givenDate, 'DD-MM')
                                    if (today.isAfter(requiredDate)) {
                                        for (let i = 0; i < dates.length; i++) {
                                            let headerDate = dates[i]
                                            let requiredDateStr = object.givenDate
                                            if (requiredDateStr !== headerDate) {
                                                return <Table.Cell textAlign='center'>
                                                    <Icon name='question' />
                                                </Table.Cell>
                                            }
                                            else {
                                                const isP = object.state === 'P'
                                                return <Table.Cell>
                                                    <Icon color={isP? 'green': 'red'} name={isP? 'check': 'close'} size='large' />
                                                    {object.state}
                                                </Table.Cell>
                                            }

                                        }
                                    }
                                    return null
                                })
                                }

                            </Table.Row>
                        )
                    })}
                </Table.Body>
            </Table>

        )
    }
}

export default MyComponent

/ * data.js * /

const P = 'P'
export default {
    'Person One': [
        {
            givenDate: '28-05',
            state: P,
            id: 234,
        },
        {
            givenDate: '29-05',
            state: P,
            id: 234
        },
        {
            givenDate: '29-05',
            state: P,
            id: 234/*  */
        },
    ],
    'Person Two': [
        {
            givenDate: '28-05',
            state: P,
            id: 234
        },
        {
            givenDate: '29-05',
            state: P,
            id: 234
        },
        {
            givenDate: '30-05',
            state: P,
            id: 234
        },
    ],
    'Person Three': [
        {
            givenDate: '28-05',
            state: P,
            id: 234
        },
        {
            givenDate: '29-05',
            state: P,
            id: 234
        },
        {
            givenDate: '30-05',
            state: P,
            id: 234
        }
    ]
}

Answer 2

Итак, из того, что я тестировал, главная проблема в том, что ваше условие if(today.isAfter(object.requiredDate)){ не выполнено, как сегодня, перед каждым датой вашего набора в "myList".