Question

我使用semantic-reactjs创建了一个表。该表有一个标题和一个子标题。子标题有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

您不应该将对象值与某些表格单元格元素的innerText进行比较
requiredDate在对象迭代中object中不存在
您的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
        }
    ]
}

无法遍历表格的所有列Reactjs

2 个答案: