遍历对象键返回Material UI组件时遇Unexpected token错误求助

我帮你排查下这段代码里的问题，你遇到的Unexpected token错误以及组件无法正常返回的问题，主要是由语法错误和逻辑使用不当导致的，咱们一步步拆解：

首先先看你的原代码：

renderTableRow(subheader) { 
  const { data, multiHeaderBy } = this.props; 
  data.map((subdata) => { 
    if (subdata[multiHeaderBy] === subheader) { 
      Object.keys(subdata).forEach(key => return <TableRowColumn>scsc</TableRowColumn>); 
    } 
    return null; 
  }); 
}

错误1：箭头函数的语法违规 #

你在forEach的回调里写了key => return <TableRowColumn>scsc</TableRowColumn>，这里犯了箭头函数的语法错误：

• 箭头函数的简洁体（不写大括号{}）时，不能使用return关键字，直接写要返回的表达式即可；
• 如果要使用return，必须给函数体加上大括号，写成key => { return <TableRowColumn>scsc</TableRowColumn>; }。

不过更重要的是，forEach根本不适合这里的场景——它只是遍历执行回调，不会收集返回值，没法生成React需要渲染的元素数组。

错误2：用错了遍历方法（forEach → map） #

要生成React组件数组，你需要用map而不是forEach：

• map会遍历数组，把每个回调的返回值组装成新数组，正好符合React渲染列表的需求；
• forEach没有返回值，就算你在回调里return，也拿不到任何组件集合。

错误3：方法没有返回最终的组件结果 #

你的renderTableRow方法里，data.map(...)的执行结果没有被return出去，导致整个方法最终返回undefined，React自然无法渲染任何内容。

修正后的代码 #

renderTableRow(subheader) {
  const { data, multiHeaderBy } = this.props;
  // 1. 把data.map的结果return出去，让React能拿到要渲染的内容
  return data.map((subdata) => {
    if (subdata[multiHeaderBy] === subheader) {
      // 2. 用map代替forEach，生成TableRowColumn组件数组
      return Object.keys(subdata).map(key => (
        // 3. 给列表元素加上唯一key属性（React要求）
        <TableRowColumn key={key}>scsc</TableRowColumn>
      ));
    }
    // 不匹配时返回null，避免渲染undefined
    return null;
  });
}

额外注意点 #

• 一定要给React列表元素加上唯一的key属性，这里用对象的键key作为key值是合理的，但要确保这些键在当前列表里是唯一的；
• 如果data数组里有多个匹配subheader的项，最终会生成嵌套的组件数组，React会自动扁平化渲染，没问题。

内容的提问来源于stack exchange，提问作者Raziel