问题
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)
回答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
来源：https://stackoverflow.com/questions/58526503/how-can-i-filter-json-data-from-api-call-in-react-into-different-sections-of-the