代码之家  ›  专栏  ›  技术社区  ›  No Do

在React中获取错误“未定义PropTypes”

  •  0
  • No Do  · 技术社区  · 7 年前

    好的,这段代码在控制台中抛出一个错误——“未定义PropTypes”,所以应用程序不会呈现。你知道配置甚至代码有什么问题吗?顺便说一句,我没有使用eslint。

    import React, { Component } from 'react';
    import PropTypes from 'prop-types';
    
    export default class Movie extends Component {
      static propTypes = {
        movie: Proptypes.shape({
          title: Proptypes.string.isRequired
        })
      };
      static defaultProps = {
        description: 'Description is not available'
      }
      render() {
        return (
          <div>
            <h3>{this.props.movie.title}</h3>
          </div>
        )
      }
    }
    

    然而,这项工作如预期的那样(在组件之后):

    Movie.propTypes = {
      movie: PropTypes.shape({
        title: PropTypes.string.isRequired
      })
    }
    

    包裹json配置:

    {
      "dependencies": {
        "babel-polyfill": "^6.26.0",
        "live-server": "^1.2.0",
        "normalize.css": "^8.0.0",
        "prop-types": "^15.6.1",
        "react": "^16.2.0",
        "react-dom": "^16.2.0",
        "react-router-dom": "^4.2.2",
        "redux": "^3.7.2"
      },
      "devDependencies": {
        "babel-cli": "^6.26.0",
        "babel-core": "^6.26.0",
        "babel-loader": "^7.1.4",
        "babel-plugin-transform-class-properties": "^6.24.1",
        "babel-preset-env": "^1.6.1",
        "babel-preset-react": "^6.24.1",
        "babel-preset-stage-0": "^6.24.1",
        "css-loader": "^0.28.11",
        "node-sass": "^4.8.3",
        "sass-loader": "^6.0.7",
        "style-loader": "^0.20.3",
        "webpack": "^4.3.0",
        "webpack-cli": "^2.0.13"
      }
    }
    

    .babelrc配置:

    {
      "presets": [
        "env",
        "react",
        "stage-0"
      ],
      "plugins": [
        "transform-class-properties"
      ]
    }
    

    网页包。配置。js公司

    const path = require('path');
    
    module.exports = {
      entry: ['babel-polyfill','./src/app.js'],
      output: {
        path: path.join(__dirname, 'public'),
        filename: 'bundle.js'
      },
      module: {
        rules: [{
          loader: 'babel-loader',
          test: /\.js$/,
          exclude: /node_modules/,
          query: {
            presets: ['react', 'env', 'stage-3', 'stage-2', 'stage-1', 'stage-0']
          }
        }, {
          test: /\.s?css$/,
          use: [
            'style-loader',
            'css-loader',
            'sass-loader'
          ]
        }]
      },
      devtool: 'cheap-module-eval-source-map',
      devServer: {
        contentBase: path.join(__dirname, 'public'),
        historyApiFallback: true
      }
    };
    
    1 回复  |  直到 7 年前
        1
  •  3
  •   VivekN    7 年前

    您在此处输入错误:-

    static propTypes = {
        movie: Proptypes.shape({
          title: Proptypes.string.isRequired
        })
      };
    

    它应该是:-

    static propTypes = {
        movie: PropTypes.shape({
          title: PropTypes.string.isRequired
        })
      };