React-prop-types被标记为必需

Question

使用propTypes和条件渲染子级时出现错误。

错误： Warning: Failed prop type: The prop 'rate' is marked as required in 'Rate', but its value is '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

我仅在将load设置为false时才渲染子元素。
编辑：我不明白为什么我率比率组件上出现此错误，直到它呈现
我不明白为什么会收到此错误。

感谢帮助

Answer 1

您可以暂时使用默认的prop值：

Rate.defaultProps = {
  rate: 0
};

您不会像@Cody Moniz在回答中所说的那样有条件地渲染Card。 您总是在渲染它。 可能是在Card组件中隐藏或显示了某些东西，这取决于传递给它的加载道具。 不必为此烦恼，只需正确使用条件渲染，然后稍微清理一下Card组件即可。

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

在这里，如果React得到null或false，它将什么都不呈现。 因此，当您的加载状态为false时，您什么都不渲染，在它变为true之后，第二部分将求值并渲染您的组件。 在逻辑&&运算符的第一部分为真之前，不会评估第二部分。 这是一种进行条件渲染的好方法，特别是在第一个条件下不显示任何内容时。

如果要显示有关Card的信息（表示对其进行渲染），但仅有条件地渲染Rate组件，则可以在Card组件中应用此逻辑，并加载Card组件获得的加载道具。

Answer 2

<Rate>仍在<App>呈现， <App> <Card>唯一要做的就是隐藏或显示传递给它的已呈现this.props.children元素。

Answer 3

您正在尝试使用与<App /> this.state.rate相等的rate prop加载<Rate />组件。 您的App组件状态没有为此this.state.rate设置任何值，因此尽管<Rate />需要PropTypes.Number ，但实际上它是undefined 。 这就是为什么它抱怨。

要解决此问题，可以将<App />的状态设置为类似以下内容：

state = {
  loading: true
  rate: 0,
};