数组或迭代器中的每个子代在Material UI中都应具有唯一的“键”道具

Question

即使在网格和纸张中添加了key属性，我仍然收到有关唯一键的警告。我也尝试过将它添加到其他几个元素中而没有运气

index.js:2178 Warning: Each child in an array or iterator should have a unique "key" prop....
    in Route (at Home.js:334)
    in div (at Home.js:317)
    in Home (created by WithStyles(Home))
    in WithStyles(Home) (created by Route)
    in Route (created by withRouter(WithStyles(Home)))
    in withRouter(WithStyles(Home)) (at App.js:33)
    in Route (at App.js:33)
    in Switch (at App.js:32)
    in MuiThemeProvider (at App.js:30)
    in App (at index.js:21)
    in Router (created by BrowserRouter)
    in BrowserRouter (at index.js:20)

首页，第334行：

<Route
  path={`${this.props.match.url}/searchResults`}
  render={() => [
    currentResult && this.renderCurrentResult(),
    !currentResult &&
      hasResults && (
        <Results
          classes={classes}
          onResultClick={this.handleResultClick}
          subs={subs || []}
          abc={abc || []}
          bca={bca || []}
        />
    )
  ]}
/>

...

const Results = ({
  subs, abc, bca, onResultClick, classes
}) => (
  <Grid container className={classes.grid}>
    <ResultsList
      onResultClick={onResultClick}
      categories={[
        { name: 'subs', results: subs },
        { name: 'abc', results: abc },
        { name: 'bca', results: bca }
      ]}
    />
  </Grid>

...

ResultsList：

const Result = ({ expanded, category, classes, onChange, onResultClick }) => (
  <ExpansionPanel
    expanded={expanded === category.name}
    onChange={onChange(category.name)}
    disabled={category.results.length === 0}
  >
    <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
      <Typography className={classes.heading}>{category.name}</Typography>
      <Typography className={classes.secondaryHeading}>
        {category.results.length} Results
      </Typography>
    </ExpansionPanelSummary>
    <ExpansionPanelDetails className={classes.resultGrid}>
      {category.results.map((result) => {
        return (
          <Grid xs={12} item key={result.id}>
            <Paper key={result.id} className={classes.result} onClick={() => onResultClick(result)}>
              <Typography className={classes.resultItemTitle}>
                {result.name} <br />
              </Typography>
              <Typography className={classes.resultItem}>
                {result.specNumber}
                &nbsp;&nbsp;&nbsp;
                {result.givenSectionName}
              </Typography>
              <Typography className={classes.resultItem}>
                pg. {result.pageNumber} <br />
              </Typography>
            </Paper>
          </Grid>
        );
      })}
    </ExpansionPanelDetails>
  </ExpansionPanel>
);

class ControlledExpansionPanels extends React.Component {
  state = {
    expanded: null
  };

  handleChange = (panel) => (event, expanded) => {
    this.setState({
      expanded: expanded ? panel : false
    });
  };

  render() {
    const { classes, categories, onResultClick } = this.props;
    const { expanded } = this.state;

    return (
      <div className={classes.root}>
        {categories.map((category) => (
          <Result
            key={category.name}
            expanded={expanded}
            onChange={this.handleChange}
            onResultClick={onResultClick}
            category={category}
            classes={classes}
          />
        ))}
      </div>
    );
  }
}

ControlledExpansionPanels.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(ControlledExpansionPanels);