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

Question

我有 2 个 json objects，其中包含基于月初至今数据和年初至今的销售期信息。此数据包括销售单位、总收入、年初至今、总计、月初至今、每日平均数、费用、净收入和每单位。 我不想通过创建循环来映射它。 我想取出我需要的列并将它们放在不同的段中 在 React Semantic UI 代码下面我不想映射它的很大一部分原因做一个循环是因为我也想重复使用Highchart中的数据来制作一些饼图。所以我应该能够在过滤后重用数据。我将把这些值放在Headers和<Statistic.Value>{this.state.data.filter(item => item.match "item.gross"}</Statistic.Value>或类似的地方

这是我的取物

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});
        });
    }

这是我要将此信息放入的片段

<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>

这是一张图片，展示了片段的样子

我在尝试使用 const YTD = this.state.data.filter(item => this.state.data.period === 'YTD'); 过滤掉然后传递 <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.state.data.map(item => { 
 if (item.period === 'YTD') {
    Return <div>{item.gross}</div>
   }

这是使用 map 重新格式化数组中对象的示例

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

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

How can I filter json data from api call in react into different sections of the component

javascript

jsx

reactjs

semantic-ui-react