警告：React 错误中的道具类型失败

Question

我在下面的 7 个 propType 中遇到了同样的错误。我找不到导致此问题的原因，但我知道 propTypes 正在运行，因为我已正确设置所有内容。

这是我的代码和控制台中显示的错误。

Warning: Failed prop type: The prop _id is marked as required in DealListItem, but its value is undefined. in DealListItem (created by DealList) in DealList (created by Deal) in div (created by Deal)

DealListItem.js

const DealListItem = (props) => {
  return (
    <div className="item">
      <h2>{this.props.title}</h2>
      <p className="item__message">{this.props.shortUrl}</p>
      <p className="deal-item">Description:{this.props.description}</p>
      <p className="deal-item">Type: {this.props.category}</p>
      <p className="deal-item">Co. {this.props.location}</p>
      <p className="deal-item">€{this.props.price}</p>
      <p className="deal-item">{ moment(this.props.createdAt).startOf('lll').fromNow() }</p>
      <img className="deal-item" src="http://placehold.it/125x125"/>
      <button className="button-deal btn-success" onClick={() => {Meteor.call('links.determineVisibility', this.props._id, !this.props.visible);}}>
        // If visible hide -> Else -> Show
        {this.props.visible ? 'Hide' : 'Show'}
      </button>
    </div>
  );
};

DealListItem.propTypes = {
  _id: React.PropTypes.string.isRequired,
  title: React.PropTypes.string.isRequired,
  description: React.PropTypes.string.isRequired,
  category: React.PropTypes.string.isRequired,
  location: React.PropTypes.string.isRequired,
  price: React.PropTypes.string.isRequired,
  visible: React.PropTypes.bool.isRequired
};

DealList.js

import DealListItem from './DealListItem';
import DealListEmpty from './DealListEmpty';

export default class DealList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      deals: []
    };
  }

  componentDidMount() {

    this.linksTracker = Tracker.autorun(() => {
      Meteor.subscribe('deals');

      const deals = Deals.find({
        // Get session variable 'displayVisible'
        visible: Session.get('displayVisible')
      }).fetch();

      // Set the state of deals
      this.setState({ deals });
    });
  }

  componentWillUnmount() {
    this.linksTracker.stop();
  }

  renderDealListItem() {
    if (this.state.deals.length === 0) {
      return (
        <div className="item">

          <p className="item__status-message">No Deals to show. Get adding!</p>

        </div>
      );
    }

    // Use map to get the deals
    return this.state.deals.map((deal) => {

      return <DealListItem key={deal._id} deal={deal}/>;

    });
  }
  render() {
    return (
      <div>



          {/* Render the documents inside the render function */}
          {this.renderDealListItem()}



      </div>
    );
  }
};

如果需要调试，我会更新更多代码。谢谢

Answer 1

当您使用 DealListItem 时，您需要将您定义的道具传递给它，如下所示：

<DealListItem key={deal._id} _id={deal._id} title={deal.title} description={deal.description} category={deal.category} location={deal.location} price={deal.price} visible={deal.visible} />;

您可以使用 jsx's spread operator 像这样缩短它

<DealListItem key={deal._id} {...deal} />;

（附带说明，我认为您需要 bind this 用于 renderDealListItem 方法（对于 react>=0.13 ））

警告：React 错误中的道具类型失败

Warning: failed prop type in React error

javascript

meteor

reactjs

react-proptypes