React JS基于获取API为每个扩展面板生成唯一数据

Question

我正在尝试基于获取API生成扩展面板，这已经成功完成了。我遇到的问题是，当我尝试在扩展面板上生成数据时，它会显示所有数据集，而我希望它在每个扩展面板上显示一组数据。我使用了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> 
                       <ExpansionPanel /> 

                    </li>
                ))}
            </ul>
            </div>

                );
            }
        }
     }


export default FetchData; 

ExpansionPanel代码

function DetailedExpansionPanel(props) {
  const { classes } = props;
  return (
    <div className={classes.root}>
      <ExpansionPanel>
        <ExpansionPanelSummary expandIcon={<img src={ExpandMoreIcon} alt="EMI"/>} >
          <div className={classes.column}>
          {this.item.props.device_id}
          </div>
          <div className={classes.column}>

          </div>
        </ExpansionPanelSummary>
        <ExpansionPanelDetails className={classes.details}>
          <div className={classes.column} />
          <div className={classes.column}>
            <Chip label="Barbados" className={classes.chip} onDelete={() => {}} />
          </div>
          <div className={classNames(classes.column, classes.helper)}>
            <Typography variant="caption">
              Select your destination of choice
              <br />
              <a href="#sub-labels-and-columns" className={classes.link}>
                Learn more
              </a>
            </Typography>
          </div>
        </ExpansionPanelDetails>
        <Divider />
        <ExpansionPanelActions>
          <Button size="small">Cancel</Button>
          <Button size="small" color="primary">
            Save
          </Button>
        </ExpansionPanelActions>
      </ExpansionPanel>
    </div>
  );
}

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