反應：如何使用日期通過 map 組顯示數組數據？

Question

我能夠在表格中顯示數據。 我的問題是所有行都帶有日期。 每個項目的日期都是相同的。 如何在表格 header 中為所有項目顯示一次日期和 FeatureName（相同值）。

{"FeatureID":"11","FeatureText":Feature2,"Date":"08/30/2011","FeatureName":"Research"},
{"FeatureID":"12","FeatureText":Feature3,"Date":"08/30/2011","FeatureName":"Research"},
{"FeatureID":"13","FeatureText":Feature4,"Date":"08/30/2011","FeatureName":"Research"}]

import React from "react";
export class DisplayFeatures extends React.Component {
constructor(props) {
       super(props);
       this.state = {
              FeatureID: "",
              Date: "",
              FeatureName
              FeatureText: "",
              Feature: [],
       }
}
       componentDidMount() {
              this.DisplayFeatures();
}
DisplayFeatures() {
              fetch(REQUEST_URL)
                     .then(response => response.json())
                     .then((data) => {
                            this.setState({
                                  Feature: data,
                                  loading: false
                           })
                     })
      }
       render() {
              return (
                     <div>
                           <form>
<table><tbody>
{this.state.Feature.map((item, index) => {
       return [
              <div>
                    <tr><td>
                           <font size="4" color="#FFFFFF"><b>{item.FeatureName}</b></font></td>
                           <td>
                           {item.date}</td></tr>
                          <td>{item.FeatureText}</td></tr></div>
       ];

})}</tbody>
</table>
</form>
</div>
              );
       }
}
export default DisplayFeatures;

Answer 1

使用像 lodash 這樣的庫首先按日期分組，然后渲染列表。

https://www.geeksforgeeks.org/lodash-_-groupby-method/

    import React from "react";
export class DisplayFeatures extends React.Component {
constructor(props) {
       super(props);
       this.state = {
              FeatureID: "",
              Date: "",
              FeatureName: "",
              FeatureText: "",
              Feature: [],
              FeatureGroupedByDate: [],
       }
}
       componentDidMount() {
              this.DisplayFeatures();
}
DisplayFeatures() {
              fetch(REQUEST_URL)
                     .then(response => response.json())
                     .then((data) => {
                            this.setState({
                                  FeatureGroupedByDate: _.groupBy(data, item => item.Date),
                                  Feature: data,
                                  loading: false
                           })
                     })
      }

您還可以將 select 數組中的第一項用作 header

Answer 2

嗨，您可以使用此代碼

import React from "react";
export class DisplayFeatures extends React.Component {
constructor(props) {
   super(props);
   this.state = {
           FeatureID: "",
           Date: "",
           FeatureName: "",
           FeatureText: "",
           Feature: [],
           FeatureGroupedByDate: [],
       }
}
  componentDidMount() {
    this.DisplayFeatures();
  }
DisplayFeatures() {
     fetch(REQUEST_URL)
          .then(response => response.json())
           .then((data) => {
                 this.setState({
                 FeatureGroupedByDate: data.reduce(function(rv, x) {
                       (rv[x['Date']] = rv[x['Date']] || []).push(x);
                          return rv;
                 }, {}),
                 Feature: data,
                 loading: false
        })
    })
}

Answer 3

所做的更改：

1. 添加了初始loading state。
2. 將Feature state 更改為Features 。 （復數，因為它包含多個特征數據）。
3. 為FeatureName和FeatureDate創建了單獨的 state
4. 在構造函數中的setSate調用期間更新FeatureName和FeatureDate 。
5. 在render function 中添加了加載 state 檢查。 （由您使用更好的加載 animation。）

import React from "react";

export class DisplayFeatures extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          FeatureDate: "",
          FeatureName: "",
          Features: [],
          loading: true
        }
    }

    componentDidMount() {
        this.DisplayFeatures();
    }

    DisplayFeatures() {
      setTimeout((()=> {
        fetch(REQUEST_URL)
            .then(response => response.json())
            .then((data) => {
              this.setState({
                Features: data,
                FeatureName: data[0].FeatureName,
                FeatureDate: data[0].date,
                loading: false
              });
            });
      }, 5000);
    }

    render() {

        if(this.state.loading){
            return <div>Loading... </div>
        }else{
            return (
                <div>
                    <form>
                        <table>
                            <th> Feature: {this.state.FeatureName} Date: {this.state.FeatureDate}</th>
                            <tbody>
                                {this.state.Features.map((item, index) => {
                                    return 
                                    <>
                                        <tr>
                                            <td> 
                                                <font size="4" color="#FFFFFF"><b>{item.FeatureName}</b></font>
                                            </td>
                                            
                                            <td>
                                                {item.date}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>{item.FeatureText}</td>
                                        </tr>
                                    </>
                                })}
                            </tbody>
                        </table>
                    </form>
                </div>
            )
        }
    }
}
export default DisplayFeatures;