React报错：Failed to construct 'Comment'，渲染对象数组遇问题

嘿，我来帮你搞定这个问题！你现在遇到的Failed to construct 'Comment'错误，还有组件渲染不出来的问题，主要是两个新手常踩的小失误导致的，咱们一步步来修正：

第一个错误：组件继承对象错误 #

你的Details类继承了Comment，这完全不对哦！React的类组件必须继承自React.Component（这是React类组件的标准基类），Comment并不是React提供的组件基类，所以会直接抛出构造错误。

第二个错误：渲染方法名拼写错误 #

你把render()写成了rendeer()——少了一个字母r！React找不到组件的渲染方法，自然没法正常渲染内容啦。

修正后的完整代码 #

咱们把这两个问题改过来，整理后的代码如下：

import React from 'react';

// App组件部分
class App extends React.Component {
  render() { 
    return ( 
      <div> 
        Your data: { this.props.val.map( (s, i) => <Details key={i} data={s} /> ) } 
      </div> 
    ); 
  }
}

// Details组件部分
class Details extends React.Component { 
  render(){ 
    return ( 
      <div> 
        <span>{this.props.data.name} {this.props.data.cgpa}</span> 
      </div> 
    ); 
  }
}

export default App;

额外的新手友好提示 #

• 如果你用的是React 16.8+，可以把Details改成更简洁的函数组件，代码会更清爽：

const Details = ({ data }) => {
  return (
    <div>
      <span>{data.name} {data.cgpa}</span>
    </div>
  );
}

• 另外，虽然用数组索引key={i}暂时能用，但如果你的数组元素有唯一标识（比如id字段），最好用那个作为key，这样React的渲染性能会更好，还能避免一些奇怪的渲染bug。

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