Не могу отобразить значение из массива в запросе graphql, используя React - PullRequest
Новая
       1

Не могу отобразить значение из массива в запросе graphql, используя React

0 голосов
/ 25 марта 2020

Я использую React с Apollo на внешнем интерфейсе, и у меня возникают проблемы с отображением заголовка и идентификатора массива лайков. Я повторяю, используя метод .map для массива track, и я могу получить доступ ко всем значениям в нем, кроме значений, хранящихся в лайках массива. Вот код, который объясняет это лучше, чем слова, которые я предполагаю:)

Приложение. 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);

1 Ответ

0 голосов
/ 26 марта 2020

Благодаря @xadm использование другого map() или одного track.likes[0].id работает!

...