我该如何过滤来自api调用的json数据，以对组件的不同部分做出反应 [英] How can I filter json data from api call in react into different sections of the component
问题描述
我有2个json对象，其中包含基于月数据和年至今的销售期间信息.此数据包括已售出单位，总收入，年初至今，总计，本月迄今，每日平均收入，费用，净收入和每单位收入. 我不不想通过创建循环来对此进行映射. 我想取出需要的列并将它们放在不同的段中:在下面的React Semantic UI代码中，我不想映射和执行循环的很大一部分原因是因为我还希望重用Highchart中的数据来制作一些饼图.因此我应该能够在过滤数据后重用数据.我将把这些值放在Headers和<Statistic.Value>{this.state.data.filter(item => item.match "item.gross"}</Statistic.Value>或类似的
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
这是我的收藏夹
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
尝试使用const YTD = this.state.data.filter(item => this.state.data.period === 'YTD');过滤然后传递<ul><li>{this.state.data}</li></ul>
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)
推荐答案
此答案可能并不完美，但您可以这样做.
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
像Mozilla https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map
这篇关于我该如何过滤来自api调用的json数据，以对组件的不同部分做出反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
