Question

以下代码在Chrome Dev工具中引发错误，但Webpack不会报告任何错误。我正在关注一个在线课程，完全相同的代码适用于教师但不适合我。毋庸置疑，我对新的反应和在线编码非常陌生，因此寻求帮助/建议。Image showing error in Chrome Dev Tools console

import React from 'react';

class ExampleWork extends React.Component {
  render() {
    return (
      <section className="section section--alignCentered section--description">

        { this.props.work.map( (example, idx) => {
          return (
            <ExampleWorkBubble example={example} key={idx} />
          )
          })
        }

      </section>
    )
  }
}

class ExampleWorkBubble extends React.Component {
  render() {
    let example = this.props.example;
    return (
      <div className="section__exampleWrapper">
        <div className="section__example">
          <img alt={ example.image.desc }
               className="section__exampleImage"
               src={ example.image.src }/>
          <dl className="color--cloud">
            <dt className="section__exampleTitle section__text--centered">
              { example.title }
            </dt>
            <dd></dd>
          </dl>
        </div>
      </div>
    )
  }
}
export default ExampleWork;

Answer 1

错误消息显示create-react-native-app app-name为this.props.work。

您似乎未将undefined道具传递给work组件。

检查呈现ExampleWork组件的代码，并将ExampleWork道具传递给它。

P.S。考虑重新命名道具work，因为它引用了一个集合。

React Uncaught TypeError：无法读取未定义的属性“map”

1 个答案: