無法遍歷表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

好吧，根據我的測試，主要問題是您的條件if(today.isAfter(object.requiredDate)){不完整，因為今天是在您將每個日期設置到“ myList”中之前。

Answer 2

1. 您不應該將對象值與某些表單元格元素的innerText進行比較
2. 對象迭代中的object中不存在requiredDate
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
        }
    ]
}