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

您忘记将道具放在构造方法中

.div-container span{
  display: block;
  height: 50%;
}
.div-container{
  height: 500px;
}
.div-container span.top{
  display: flex;
  align-items: flex-end;
}

应该是

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

Answer 2

请在下面找到更新的工作代码，

发现您没有通过标题传递道具，也没有通过CardList传递道具

const CardList = (props) => (
    <div>
    {props.testData.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 App extends React.Component {

    render() {
    return (
        <div>
          <div className="header">{this.props.title}</div>
        <CardList testData={this.props.data}/>
        </div>
    );
  } 
}
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"},
];
ReactDOM.render(
    <App title="The GitHub Cards App" data={testData}/>,
  mountNode,
);

通过PluralSight反应教程-道具未定义

2 个答案: