React应用从外部seed.js导数据显示空白，代码是否过时？

问题背景 #

刚开始学习React，使用Anthony Accomozzio等人2020年1月13日版的《Fullstack React》，通过npx create-react-app创建项目。在实现「产品数据驱动」环节遇到问题：从外部seed.js文件通过props传递数据时页面显示空白，但硬编码数据时应用可正常运行。

相关代码 #

App.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 };
}());

问题原因与修复 #

你的代码不是因为React版本过时导致的问题，核心错误有两个：

1. 函数组件误用this.props
Product是函数组件，函数组件的props需通过参数传入，不能使用this.props。this在函数组件中指向undefined，直接访问会引发错误，导致页面渲染失败空白。

2. props拼写错误
   App组件向Product传递description时，写成了decription（少一个s），导致Product中无法正确获取描述内容。

修复后的App.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}
        description={product.description} {/* 修正拼写错误 */}
        url={product.url}
        votes={product.votes}
        submitterAvatarUrl={product.submitterAvatarUrl}
        productImageUrl={product.productImageUrl}
      />
    </div>
  );
}

// 函数组件接收props参数
const Product = (props) => {
  return (
    <div className='item'>
        <div className='image'>
          <img src={props.productImageUrl} /> {/* 使用props.xxx访问属性 */}
        </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>
  );
}

export default App;

补充说明 #

• 函数组件是React 16.8+就支持的写法，当前所有React版本都完全兼容，不存在过时问题。
• seed.js将数据挂载到window对象的方式虽然不是React项目的最佳实践（更推荐ES模块导入），但本身不会导致页面空白，只是全局变量的使用方式。

内容的提问来源于stack exchange，提问作者Augustus Inyang