Реагировать JS, как получить уникальные данные API в разных сетках - PullRequest
Новая
       26

Реагировать JS, как получить уникальные данные API в разных сетках

0 голосов
/ 27 августа 2018

Я пытаюсь получить данные APi и отобразить их в трех разных блоках сетки. Однако, когда я получаю данные, появляются три часа, но все три набора данных отображаются во всех трех блоках. Есть ли способ, которым я могу иметь один уникальный набор данных на блок сетки?

Я использовал выборку для отображения блоков сетки для подсчета трех из них, затем я использовал вторую выборку в сетке для получения нужных мне данных, есть ли способ проецировать уникальные данные из первого извлечения API? Я не слишком уверен, как продолжить на этом этапе. Довольно новый для ReactJS. Используется Сетка в материале-UI 

 class FetchData extends Component {
        constructor(props) {
            super(props);
            this.state = {
                isLoaded: false,
                items: [],
            }
        }

    componentDidMount() {
        fetch(url , {
            method: 'get',
            mode: 'cors',
            headers: { 
            'X-API-KEY': API_KEY,
            'Access-Control-Allow-Origin': '*',
            'Accept': 'application/json',
            'Content-Type': 'application/json'
            }

        })
            .then(res => res.json())
            .then(json => {
                this.setState({
                    isLoaded: true,
                    items: json,
                })
            })
        };
        render() {
            const { classes } = this.props;

            var{ isLoaded, items } = this.state;
            if(!isLoaded) {
                return <div>Loading...</div>
            }

            else{

            return (
                <div className="container">
                 <ul>
                    {items.map((item) => (
                        <li key={item.device_id}> 
                           <Grid />
                        </li>
                    ))}
                </ul>
                </div>

                    );
                }
            }
         }


    export default FetchData;

код в сетке 

const styles = theme => ({
  root: {
    flexGrow: 1,
    maxWidth: '100%',
    maxHeight: 'auto',
    padding: theme.spacing.unit * 2,
  },
  image: {
    width: '100%',
    height: 128,
  },
  img: {
    margin: 'auto',
    display: 'block',
    maxWidth: '100%',
    maxHeight: '100%',
  },
});

    function ComplexGrid(props) {
      const { classes } = props;
      return (
        <Paper className={classes.root}>
          <Grid container spacing={16}>
            <Grid item>
              <ButtonBase className={classes.image}>
                <img className={classes.img} alt="complex" src="/static/images/grid/complex.jpg" />
              </ButtonBase>
            </Grid>
            <Grid item xs={12} sm container>
              <Grid item xs container direction="column" spacing={16}>
                <Grid item xs>
                  <Typography gutterBottom variant="subheading">
                    Standard license
                  </Typography>
                  <Typography gutterBottom><FetchID /></Typography>
                  <Typography color="textSecondary"></Typography>
                </Grid>
                <Grid item>
                  <Typography style={{ cursor: 'pointer' }}>Remove</Typography>
                </Grid>
              </Grid>
              <Grid item>
                <ButtonBase className="callButton"> Call API </ButtonBase>
              </Grid>
            </Grid>
          </Grid>
        </Paper>
      );
    }

    ComplexGrid.propTypes = {
      classes: PropTypes.object.isRequired,
    };

    export default withStyles(styles)(ComplexGrid);
...