Question

让我说我的json喜欢这个

{
   "Values":[
      {
         "Summary":"What to expect during the Federal Reserve Monetary Council this time? Will the FOMC provide hints about its monetary policy? Watch the Fed FOMC intere",
         "Company":{
            "Id":"852b9932-1ccb-4a23-bb49-3e6772db28bc",
            "Name":"FXStreet"
         },
         "Tags":[
            {
               "Id":"5f91ad8f-26cd-4643-9233-46bd18b03a70",
               "Name":"EURUSD"
            },
            {
               "Id":"f29d883c-d685-47d4-8152-58fbb1fff04b",
               "Name":"Fed"
            },
            {
               "Id":"6e7a9711-3ad6-47bb-8145-84908af2786f",
               "Name":"CentralBanks"
            },
            {
               "Id":"71f084aa-8636-45a8-b08c-ba41a091be85",
               "Name":"USDJPY"
            },
            {
               "Id":"14989b65-d8d2-48b2-85bd-fe3b05d414c0",
               "Name":"DollarIndex"
            }
         ],
         "Id":"3e24b9dc-12fe-4d87-b22e-363b367f6cb8",
         "PublicationDate":"2017-07-26T17:45:00Z",
         "Title":"Live Coverage: FOMC July 26th",
         "Url":"https://www.fxstreet.com/events/live-coverage-fomc-july-26th-201707261745",
         "Author":{
            "Id":"ab05093d-8c7a-4c72-9d94-7765dd7f73be",
            "Name":"Valeria Bednarik"
         },
         "Image":{
            "Url_XtraLarge":"",
            "Url_Large":"",
            "Url_Medium":"",
            "Url_Small":"",
            "Url_XtraSmall":"",
            "Url_Nano":"",
            "Caption":null,
            "Copyright":null,
            "Title":null
         }
      },
      {
         "Summary":"In this webinar, professional trader, money manager and trading coach Jens Klatt and Stefan Friedrichowski, Ph.D. in Physics, quantitative pro-trader ",
         "Company":{
            "Id":"a0fde098-d4e2-4055-b9f2-64693c676b3b",
            "Name":"JFD Brokers Ltd"
         },
         "Tags":[
            {
               "Id":"b97e5e97-9bdb-48aa-af9b-013f3b95c773",
               "Name":"TechnicalAnalysis"
            },
            {
               "Id":"aace4329-8711-4cd6-a796-1cc2ab8484ee",
               "Name":"TrendFollowing"
            },
            {
               "Id":"ab99a439-75d2-49e0-8031-28adeb4ee74f",
               "Name":"Momentum"
            },
            {
               "Id":"7c73a663-0691-427e-965d-3c202a4f903f",
               "Name":"ChartPatterns"
            },
            {
               "Id":"864d4b2c-d423-45f0-9321-9de361d42759",
               "Name":"Candlesticks"
            }
         ],
         "Id":"2e9e7dfa-edf2-45b6-8fa2-a7de8a775e3b",
         "PublicationDate":"2017-07-25T13:00:00Z",
         "Title":"Live Trading Session – Discover tactics of discretionary and quantitative Pro-Traders - Part 4",
         "Url":"https://www.fxstreet.com/events/live-trading-session-discover-tactics-of-discretionary-and-quantitative-pro-traders-part-4-201707251300",
         "Author":{
            "Id":"6d573b01-f601-492f-b25c-b4197554f614",
            "Name":"Jens Klatt"
         },
         "Image":{
            "Url_XtraLarge":"",
            "Url_Large":"",
            "Url_Medium":"",
            "Url_Small":"",
            "Url_XtraSmall":"",
            "Url_Nano":"",
            "Caption":null,
            "Copyright":null,
            "Title":null
         }
      },
      {
         "Summary":"The ECB Monetary Policy meeting is always a key event that provides Euro, US Dollar and other currencies clues. In addition, Mario Draghi is always wi",
         "Company":{
            "Id":"852b9932-1ccb-4a23-bb49-3e6772db28bc",
            "Name":"FXStreet"
         },
         "Tags":[
            {
               "Id":"e6e939d9-7bd8-4337-9cbd-390fc5e89b54",
               "Name":"ECB"
            },
            {
               "Id":"5f91ad8f-26cd-4643-9233-46bd18b03a70",
               "Name":"EURUSD"
            },
            {
               "Id":"a47e3456-d930-4439-8598-65e8b9171e2d",
               "Name":"Eurozone"
            },
            {
               "Id":"6e7a9711-3ad6-47bb-8145-84908af2786f",
               "Name":"CentralBanks"
            },
            {
               "Id":"a6221cea-1f2f-46c6-a623-bc085412ac4c",
               "Name":"EURGBP"
            }
         ],
         "Id":"19b4993f-98ab-4fd3-9274-678482c0bd5c",
         "PublicationDate":"2017-07-20T11:40:00Z",

     "Title":"Live Coverage: ECB rate decision & Mario Draghi speech, July 20th",
     "Url":"https://www.fxstreet.com/events/live-coverage-ecb-rate-decision-mario-draghi-speech-july-20th-201707201130",
     "Author":{
        "Id":"ab05093d-8c7a-4c72-9d94-7765dd7f73be",
        "Name":"Valeria Bednarik"
     },
     "Image":{
        "Url_XtraLarge":"",
        "Url_Large":"",
        "Url_Medium":"",
        "Url_Small":"",
        "Url_XtraSmall":"",
        "Url_Nano":"",
        "Caption":null,
        "Copyright":null,
        "Title":null
     }
  }
]

}

我已经尝试了什么

import React, { Component } from 'react';

class News extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {

    fetch('/src/components/main/social/data.json')
    .then(data => data.json())
    .then(data => {
      this.setState({
        Values: data
      });
    });


  }

  render() {
    if(!this.state.Values) return <p>Loading...</p>;
    return (
      <div>
        <div className="flotish">
          <div className="title-flotish">
            <div className="col-md-2">
              <p className="border-after">Time</p>
            </div>
            <div className="col-md-10">
              <p>Headline</p>
            </div>
          </div>
          <div className="body-flotish">
            <div className="bg-news-flot">
              <div className="col-md-2 bg-terss">
                <p className="timerNews">14:50</p>
              </div>
              <div className="col-md-10">
                <p>{this.state.Values.Summary}</p>
              </div>
            </div>
            <div className="bg-news-flot">
              <div className="col-md-2 bg-terss">
                <p className="timerNews">14:50</p>
              </div>
              <div className="col-md-10">
                <p>Forex - Dollar mostly flat in early Asia in light regional day</p>
              </div>
            </div>
            <div className="bg-news-flot">
              <div className="col-md-2 bg-terss">
                <p className="timerNews">14:50</p>
              </div>
              <div className="col-md-10">
                <p>Forex - Dollar mostly flat in early Asia in light regional day</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default News;

我设法得到州数据

但问题是当我追加

时

<p>{this.state.Values.Summary}</p>

它没有显示任何内容。也许我在我的代码中做了一些不正确的事情，你们可以给出一些暗示或提示如何解决这个问题。你的帮助真的很感激。感谢。

Answer 1

这段代码

<p>{this.state.Values.Summary}</p>

没有显示任何内容，因为组件状态只有一个对象Values，其中只有一个数组Values。

<p>{this.state.Values.Values[0].Summary}</p>

应显示"What to expect during the Federal Reserve ..."

您可能希望将Values数组直接放入状态以省略过多的输入

....
then(data => {
      this.setState({
        Values: data.Values
      });

Answer 2

<p>{this.state.Values.Summary}</p>无效，因为

this.state.Values

是一个数组，因此您可以使用.map（）来获取数组中的值。

在render方法中你必须映射数组，如：

this.state.Values.map((item, index) => {
    return (
        <div className="col-md-10">
            <p>{item.summary}</p>
        </div>
    );
});

Answer 3

您需要以下内容

首先编写一个像上面这样的无状态comp，只显示状态数据数组中的每个条目。

然后上面的有状态组件将如下所示

render() {
    const summary = this.state.values
    return (
        <div>
        {
          summary.map(entry => (<StateLessDisplayComp key={summary.indexOf(entry)} record={entry} />))

        }
       </div>
    )

}

如上所述。您需要迭代状态数组，然后显示其中的每个条目。 Map不会改变您的数据，因此这是执行此操作的最佳方式。

如何使用Reactjs模板json

3 个答案: