我的 react.js 应用程序在尝试使用外部 js 文件播种时一片空白

Question

我刚开始学习 React，所以我拿起了 Anthony Accomozzio 等人的 Fullstack React 一书，最新版本是 2020 年 1 月 13 日。我用npx create-react-app创建了 react 应用程序，我被困在了'使产品数据驱动'，我试图使用道具从外部文件 seed.js 播种数据，但它返回一个空白屏幕。 但如果数据是硬编码的，则运行。

应用程序.js：

import logo from './logo.svg';
import './App.css';

import './seed';

function App() {
  const product = window.Seed.products[1];
  return (
    <div className="App">
      <Product 
        id = {product.id}
        title = {product.title}
        decription = {product.description}
        url = {product.url}
        votes = {product.votes}
        submitterAvatarUrl = {product.submitterAvatarUrl}
        productImageUrl = {product.productImageUrl}
      />
      
      
    </div>
  );
}

const Product = () => {
  return (

    <div className = 'item'>
        <div className = 'image'>
          <img src = {this.props.productImageUrl} />
        </div>
        <div className = 'middle aligned content'>
          <div className = 'header'>
            <a>
              <i className = 'large caret up icon' />
            </a>
            {this.props.votes}
          </div>
          <div className = 'description'>
            <a href = {this.props.url}>
              {this.props.title}
            </a>
            <p>
              {this.props.description}
            </p>
          </div>
          <div className='extra'>
            <span>Submitted by:</span>
            <img
              className='ui avatar image'
              src = {this.props.submitterAvatarUrl}
            />
          </div>
        </div>
      </div>

  );
    
}

export default App;

具有数据的 seed.js：

window.Seed = (function (){

    function generateVoteCount() {
        return Math.floor((Math.random() * 50) + 15);
      }
    
    const products = [
        {
            id: 1,
            title: 'Yellow Pail',
            description: 'On-demand sand castle construction expertise.',
            url: '#',
            votes: generateVoteCount(),
            submitterAvatarUrl: 'images/avatars/daniel.jpg',
            productImageUrl: 'images/products/image-aqua.png',
        },
        ...
    ];
    return { products: products };
}());

反应版本是否弃用了代码？

Answer 1

您的Product组件是一个功能组件，这意味着没有this.props 。

您需要将props作为参数，然后您可以使用prop.xxx来访问这些值。

const Product = (props) => {
  return (
    <div className="item">
      <div className="image">
        <img src={props.productImageUrl} />
      </div>
      <div className="middle aligned content">
        <div className="header">
          <a>
            <i className="large caret up icon" />
          </a>
          {props.votes}
        </div>
        <div className="description">
          <a href={props.url}>{props.title}</a>
          <p>{props.description}</p>
        </div>
        <div className="extra">
          <span>Submitted by:</span>
          <img className="ui avatar image" src={props.submitterAvatarUrl} />
        </div>
      </div>
    </div>
  );
};