javascript - React - prop-types 被标记为必需

Question

我在使用 propTypes 和条件渲染子项时遇到错误。

错误:警告: Prop 类型失败: Prop “rate”在“Rate”中被标记为必需，但其值为“undefined”

// index.js
import React, { Component } from "react";
import { render } from "react-dom";
import Rate from "./components/Rate";
import Card from "./components/Card";

class App extends Component {
  state = {
    loading: true
  };

  componentDidMount() {
    setTimeout(() => this.setState({ loading: false, rate: 5 }), 5000);
  }

  render() {
    return (
      <Card loading={this.state.loading}>
        <Rate rate={this.state.rate} />
      </Card>
    );
  }
}

render(<App />, document.getElementById("root"));

// rate.js
import React from "react";
import PropTypes from "prop-types";

const Rate = ({ rate }) => (
  <div>
    <span>{rate}/10</span>
  </div>
);

Rate.propTypes = {
  rate: PropTypes.number.isRequired
};

export default Rate;

我在这里重现了我的错误: https://codesandbox.io/embed/qvx8q78ypw

我只想在 loading 设置为 false 时渲染子元素。
编辑:我不明白为什么在渲染 Rate 组件之前会出现此错误
我不明白为什么会出现此错误。

感谢帮助

Answer 1

你可以暂时使用默认的 prop 值:

Rate.defaultProps = {
  rate: 0
};

您没有像@Cody Moniz 在回答中所说的那样有条件地呈现 Card。你总是在渲染它。可能在您的 Card 组件中，您隐藏或显示某些内容取决于您传递给它的 loading Prop 。不要那样麻烦，只需正确使用条件渲染并稍微清理一下您的 Card 组件即可。

render() {
    return !this.state.loading && (
      <Card>
        <Rate rate={this.state.rate} />
      </Card>
    );
}

在这里，如果 React 得到 null 或 false，它什么也不渲染。因此，当您的加载状态为 false 时，您什么也不渲染，在它变为 true 之后，第二部分将评估并渲染您的组件。在第一部分为逻辑 && 运算符之前，不会评估第二部分。这是进行条件渲染的一种简洁明了的方法，尤其是您希望在第一种情况下不显示任何内容。

如果您想显示有关 Card 的内容(意味着渲染它)但仅有条件地渲染 Rate 组件，您可以在 Card 组件中应用此逻辑，并使用 Card 组件获取的 loading 属性。