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,
};