React JS如何在不同的网格中获取唯一的api数据

Question

我正在尝试获取APi数据并将其显示在三个不同的网格块上。但是，当我获取数据时，会显示三个时钟，但是在所有三个块中都会显示所有三组数据。有没有一种方法可以使每个网格块具有一组唯一的数据？

我使用一次获取使网格块看起来包括其中的三个，然后我在网格中进行了第二次获取来获取所需的数据，有没有办法从第一个API拉项中投影唯一数据？我现在不太确定如何继续。对ReactJS来说还很新。 material-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);