javascript - 通过 PluralSight 进行 React 教程 - Prop 未定义

Question

当我遇到错误时，我一直在关注 PluralSight 上的 React 教程。可能是我的，我不知道。

我一直在使用 JS Complete。本教程将我定向到此 URL，这是起点:

https://jscomplete.com/playground/rgs2.4

随着教程的进展，我得到了以下代码:

const testData = [
{name: "Dan Abramov", avatar_url: "https://avatars0.githubusercontent.com/u/810438?v=4", company: "@facebook"},
{name: "Sophie Alpert", avatar_url: "https://avatars2.githubusercontent.com/u/6820?v=4", company: "Humu"},
{name: "Sebastian Markbåge", avatar_url: "https://avatars2.githubusercontent.com/u/63648?v=4", company: "Facebook"},
];

const CardList = (props) => (
  <div>
   {props.profiles.map(profile => <Card {...profile}/>)}
  </div>
);

class Card extends React.Component {
  render() {
    const profile = this.props;
    return (
      <div className="github-profile">
        <img src={profile.avatar_url} />
        <div className="info">
          <div className="name">{profile.name}</div>
          <div className="company">{profile.company}</div>
        </div>
      </div>
    );
  }    
}

class Form extends React.Component {
  render() {
    return (
      <form action="">
        <input type="text" placeholder="GitHub username" />
        <button>Add Card</button>
      </form>
   );
  }
}

class App extends React.Component {
constructor() {
  super(props);
    this.state = {
      profiles: testData,
    };
  }
  render() {
    return (
      <div>
        <div className="header">{this.props.title}</div>
        <Form />
        <CardList profiles={this.state.profiles} />
      </div>
    );
  } 
}

ReactDOM.render(
  <App title="The GitHub Cards App" />,
  mountNode,
);

在 JS Complete 站点上，它打印错误如下:

ReferenceError: props is not defined
at new App 
at constructClassInstance 
at updateClassComponent 
at beginWork$1 
at HTMLUnknownElement.callCallback 
at HTMLUnknownElement.sentryWrapped 
at Object.invokeGuardedCallbackDev 
at invokeGuardedCallback 
at beginWork$$1 
at performUnitOfWork

我想说我完全按照教程进行操作，但也许我需要一双新的眼睛。我是 React 新手。

Answer 1

你忘记将 props 放入构造方法中

App extends React.Component {
  constructor() {...

应该是

App extends React.Component {
  constructor(props) {...