如何过滤来自 api 调用的 json 数据，以响应组件的不同部分

Question

I have 2 json objects that contain sales period information based on Month to data and year to date. This data includes Units Sold, Gross Revenue, Year to Date, TOTALS, Month to Date, DAILY AVGs,Expenses, Net Revenues, and PER UNIT. I do not want to map this by creating a loop. I want to take the columns out that I need and place them in different segments In the React Semantic UI code Below A big part of the reason for me not wanting to map it and do a loop is because I also want to reuse the data in a Highchart to make some pie charts. So I should be able to reuse the Data after filtering it. I will be placing the values in the Headers and the <Statistic.Value>{this.state.data.filter(item => item.match "item.gross"}</Statistic.Value> or something like that

Here is my fetch

class FetchTest extends Component {
    state = {
      data: [],
      loading: true,
      error: false
    }
    componentDidMount() {
      // Pick whatever host/port your server is listening on
      fetch('/product/1')
        .then(res => { // <-- The `results` response object from your backend
          // fetch handles errors a little unusually
          if (!res.ok) {
            throw res;
          }
          // Convert serialized response into json
          return res.json()
        }).then(data => {
          // setState triggers re-render
          this.setState({loading: false, data});
        }).catch(err => {
          // Handle any errors
          console.error(err);
          this.setState({loading: false, error: true});
        });
    }

Here is the segments that I want to place this info in

<div>
  <Header as="h2" textAlign="left" className="ui header">
    Sales
  </Header>
  <Segment.Group horizontal>
    <Segment className="violet horizontal">
      <Header as="h3" textAlign="left" className="ui header">
        <Icon className="violet icon" name="dolly" />
        Units Sold
      </Header>
      <Grid className="ui two column grid">
        <Grid.Row>
          <Grid.Column>
            <Header as="h4" textAlign="left">
              YTD<Header sub>Year to Date</Header>
            </Header>
            <Statistic horizontal className="mini" floated="left">
              <Statistic.Value>91.9K</Statistic.Value>{" "}
              {/* This is where  dashboards.sales.period.YTD.sold | shortNum was */}
              <Statistic.Label>Total</Statistic.Label>
            </Statistic>
            <Statistic horizontal className="mini lnegdot2em" floated="left">
              <Statistic.Value>321.8</Statistic.Value>
              {/* This is where  dashboards.sales.period.YTD.avgSold | shortNum */}
              <Statistic.Label>Daily Avg</Statistic.Label>
            </Statistic>
          </Grid.Column>
          <Grid.Column>
            <Header as="h4" textAlign="left">
              MTD<Header sub>Month to Date</Header>
            </Header>
            <Statistic horizontal className="ui mini" floated="left">
              <Statistic.Value>49.2K</Statistic.Value>
              <Statistic.Label>Total</Statistic.Label>
            </Statistic>
            <Statistic horizontal className="mini lnegdot2em" floated="left">
              <Statistic.Value>3.5K</Statistic.Value>
              <Statistic.Label>Daily Avg</Statistic.Label>
            </Statistic>
          </Grid.Column>
        </Grid.Row>
      </Grid>
    </Segment>
    <Segment color="olive">
      <Header as="h3" textAlign="left">
        <Icon color="olive" className="alternative outline" name="money" />
        Gross Revenue
      </Header>
      <Grid className="ui two column grid">
        <Grid.Row>
          <Grid.Column>
            <Header as="h4" textAlign="left">
              YTD<Header sub>Year to Date</Header>
            </Header>
            <Statistic horizontal className="mini" floated="left">
              <Statistic.Value>91.9K</Statistic.Value>
              <Statistic.Label>Total</Statistic.Label>
            </Statistic>
            <Statistic horizontal className="mini lnegdot2em" floated="left">
              <Statistic.Value>321.8</Statistic.Value>
              <Statistic.Label>Daily Avg</Statistic.Label>
            </Statistic>
            <Statistic
              horizontal
              className="mini lnegdot2em unitmg"
              floated="left"
            >
              <Statistic.Value>321.8</Statistic.Value>
              <Statistic.Label>PER UNIT</Statistic.Label>
            </Statistic>
          </Grid.Column>
          <Grid.Column>
            <Header as="h4" textAlign="left">
              MTD<Header sub>Month to Date</Header>
            </Header>
            <Statistic horizontal className="ui mini" floated="left">
              <Statistic.Value>49.2K</Statistic.Value>
              <Statistic.Label>Total</Statistic.Label>
            </Statistic>
            <Statistic horizontal className="mini lnegdot2em" floated="left">
              <Statistic.Value>3.5K</Statistic.Value>
              <Statistic.Label>Daily Avg</Statistic.Label>
            </Statistic>
            <Statistic
              horizontal
              className="mini lnegdot2em unitmg"
              floated="left"
            >
              <Statistic.Value>321.8</Statistic.Value>
              <Statistic.Label>PER UNIT</Statistic.Label>
            </Statistic>
          </Grid.Column>
        </Grid.Row>
      </Grid>
    </Segment>
    <Segment color="red">
      <Header as="h3" textAlign="left">
        <Icon color="red" name="cogs" />
        Expenses
      </Header>
      <Grid className="ui two column grid">
        <Grid.Row>
          <Grid.Column>
            <Header as="h4" textAlign="left">
              YTD<Header sub>Year to Date</Header>
            </Header>
            <Statistic horizontal className="mini" floated="left">
              <Statistic.Value>91.9K</Statistic.Value>
              <Statistic.Label>Total</Statistic.Label>
            </Statistic>

            <Statistic horizontal className="mini lnegdot2em" floated="left">
              <Statistic.Value>321.8</Statistic.Value>
              <Statistic.Label>Daily Avg</Statistic.Label>
            </Statistic>
            <Statistic
              horizontal
              className="mini lnegdot2em unitmg"
              floated="left"
            >
              <Statistic.Value>321.8</Statistic.Value>
              <Statistic.Label>PER UNIT</Statistic.Label>
            </Statistic>
          </Grid.Column>
          <Grid.Column>
            <Header as="h4" textAlign="left">
              MTD<Header sub>Month to Date</Header>
            </Header>
            <Statistic horizontal className="ui mini" floated="left">
              <Statistic.Value>49.2K</Statistic.Value>
              <Statistic.Label>Total</Statistic.Label>
            </Statistic>
            <Statistic horizontal className="mini lnegdot2em" floated="left">
              <Statistic.Value>3.5K</Statistic.Value>
              <Statistic.Label>Daily Avg</Statistic.Label>
            </Statistic>
            <Statistic
              horizontal
              className="mini lnegdot2em unitmg"
              floated="left"
            >
              <Statistic.Value>321.8</Statistic.Value>
              <Statistic.Label>PER UNIT</Statistic.Label>
            </Statistic>
          </Grid.Column>
        </Grid.Row>
      </Grid>
    </Segment>
    <Segment color="green">
      <Header as="h3" textAlign="left">
        <Icon color="green" name="dollar sign" />
        Net Revenue
      </Header>
      <Grid className="ui two column grid">
        <Grid.Row>
          <Grid.Column>
            <Header as="h4" textAlign="left">
              YTD<Header sub>Year to Date</Header>
            </Header>
            <Statistic horizontal className="mini" floated="left">
              <Statistic.Value>91.9K</Statistic.Value>
              <Statistic.Label>Total</Statistic.Label>
            </Statistic>
            <Statistic horizontal className="mini lnegdot2em" floated="left">
              <Statistic.Value>321.8</Statistic.Value>
              <Statistic.Label>Daily Avg</Statistic.Label>
            </Statistic>
            <Statistic
              horizontal
              className="mini lnegdot2em unitmg"
              floated="left"
            >
              <Statistic.Value>321.8</Statistic.Value>
              <Statistic.Label>PER UNIT</Statistic.Label>
            </Statistic>
          </Grid.Column>
          <Grid.Column>
            <Header as="h4" textAlign="left">
              MTD<Header sub>Month to Date</Header>
            </Header>
            <Statistic horizontal className="ui mini" floated="left">
              <Statistic.Value>49.2K</Statistic.Value>
              <Statistic.Label>Total</Statistic.Label>
            </Statistic>
            <Statistic horizontal className="mini lnegdot2em" floated="left">
              <Statistic.Value>3.5K</Statistic.Value>
              <Statistic.Label>Daily Avg</Statistic.Label>
            </Statistic>
            <Statistic
              horizontal
              className="mini lnegdot2em unitmg"
              floated="left"
            >
              <Statistic.Value>321.8</Statistic.Value>
              <Statistic.Label>PER UNIT</Statistic.Label>
            </Statistic>
          </Grid.Column>
        </Grid.Row>
      </Grid>
    </Segment>
  </Segment.Group>
</div>

Here is a photo of what the segments would look like

I got this error when trying to filter out using const YTD = this.state.data.filter(item => this.state.data.period === 'YTD'); and then passing <ul><li>{this.state.data}</li></ul>

Objects are not valid as a React child (found: object with keys {period, sold, gross, cost, net, avgSold, avgGross, avgCost, avgNet, unitGross, unitCost, unitNet}). If you meant to render a collection of children, use an array instead.
    in li (at FetchTest.js:45)
    in ul (at FetchTest.js:44)
    in div (at FetchTest.js:37)
    in FetchTest (created by Context.Consumer)
    in withRouter(FetchTest) (created by Context.Consumer)
    in Route (at App.js:38)
    in div (at App.js:24)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:23)
    in App (at src/index.js:6)

Answer 1

This answer might not be perfect but you can do it like so.

{this.state.data.map(item => { 
 if (item.period === 'YTD') {
    Return <div>{item.gross}</div>
   }

This is an example of Using map to reformat objects in an array

Like Mozilla https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map