无法使用 React 在 graphql 查询中显示数组中的值

Question

我在前端使用带有 Apollo 的 React，但在显示标题和数组 like 的 ID 时遇到问题。我使用方法 .map 在轨道数组上进行迭代，我可以访问其中的所有值，但存储在数组中的值除外。这是解释它的代码比我猜的话更好:)

App.js

import React from "react";
import withStyles from "@material-ui/core/styles/withStyles";

import { Query } from 'react-apollo'
import { gql } from 'apollo-boost'

import SearchTracks from '../components/Track/SearchTracks'
import TrackList from '../components/Track/TrackList'
import CreateTrack from '../components/Track/CreateTrack'

import Loading from '../components/Shared/Loading'
import Error from '../components/Shared/Error'

const App = ({ classes }) => {
  return (
    <div className={classes.container}>
      <SearchTracks />
      <CreateTrack />
      <Query query={GET_TRACKS_QUERY}>
        {({ data, loading, error }) => {
          if (loading) return <Loading />
          if (error) return <Error error={error} />

          return <TrackList tracks={data.tracks} />
        }}
      </Query>
    </div>
  );
};

const GET_TRACKS_QUERY = gql`
  query getTracksQuery {
    tracks {
      id
      title
      description
      url
      likes {
        title
        id
      }
      postedBy {
        id
        username
      }
    }
  }
`

const styles = theme => ({
  container: {
    margin: "0 auto",
    maxWidth: 960,
    padding: theme.spacing.unit * 2
  }
});

export default withStyles(styles)(App);

TrackList.js

import React from "react";
import withStyles from "@material-ui/core/styles/withStyles";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";
import Typography from "@material-ui/core/Typography";
import ExpansionPanel from "@material-ui/core/ExpansionPanel";
import ExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails";
import ExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
import ExpansionPanelActions from "@material-ui/core/ExpansionPanelActions";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";

import AudioPlayer from '../Shared/AudioPlayer'
import LikeTrack from './LikeTrack'
import CreateTrack from './CreateTrack'
import DeleteTrack from './DeleteTrack'
import UpdateTrack from './UpdateTrack'
import { Link } from 'react-router-dom'

const TrackList = ({ classes, tracks }) => (
  <List>
    {tracks.map( track => (
      <ExpansionPanel key={track.id}>
        <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
          <ListItem primaryTypographyProps={{
            variant: "subheading",
            color: "primary"
          }} className={classes.root}>
            <LikeTrack />
            <ListItemText primary={track.title} secondary={
              <Link className={classes.link} to={`/profile/${track.postedBy.id}`}>
                {track.postedBy.username}
              </Link>
            } />
            <AudioPlayer />
          </ListItem>
        </ExpansionPanelSummary>
        <ExpansionPanelDetails className={classes.details}>
            <Typography variant="body1">
              {track.description}
              {track.likes.id} {/* { Value not displayed } */}
            </Typography>
        </ExpansionPanelDetails>
        <ExpansionPanelActions>
          <UpdateTrack />
          <DeleteTrack />
        </ExpansionPanelActions>
      </ExpansionPanel>
    ) )}
  </List>
);

const styles = {
  root: {
    display: "flex",
    flexWrap: "wrap"
  },
  details: {
    alignItems: "center"
  },
  link: {
    color: "#424242",
    textDecoration: "none",
    "&:hover": {
      color: "black"
    }
  }
};

export default withStyles(styles)(TrackList);

Answer 1

感谢@xadm 使用另一个map() 或单个track.likes[0].id 有效！