Javascript 反应-根据需要标记支柱类型

当我使用propTypes和条件呈现子对象时，我遇到了一个错误

错误：

警告：失败的道具类型：道具“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;

//index.js
从“React”导入React，{Component}；
从“react dom”导入{render}；
来自“/组件/费率”的进口费率；
从“/components/Card”导入卡片；
类应用程序扩展组件{
状态={
加载：正确
};
componentDidMount（）{
setTimeout（（）=>this.setState（{loading:false，rate:5}），5000；
}
render（）{
返回(
);
}
}
渲染(

我只想在加载设置为false时呈现子元素。

编辑：我不明白为什么在呈现速率组件之前，会在速率组件上出现此错误

我不明白为什么我会犯这个错误

感谢您的帮助
您正在尝试加载
组件，其
速率
属性等于
中的
this.state.rate
。您的应用程序组件状态没有为
this.state.rate
设置任何属性，因此
需要
属性类型.Number
，但实际上它得到了
未定义的
。这就是为什么它在抱怨

要解决此问题，您可以将
的状态设置为如下：

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

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

Rate.defaultProps = {
  rate: 0
};

你没有像@Cody Moniz在回答中所说的那样有条件地渲染卡片。你总是在渲染它。可能在你的卡片组件中，你隐藏或显示的东西取决于你传递给它的加载道具。不要这样麻烦，只需正确地使用条件渲染，并稍微清理一下你的卡片组件

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

render（）{
return！this.state.loading&&(
);
}

这里，如果React为null或false，它将不呈现任何内容。因此，当加载状态为false时，您将不呈现任何内容，在它变为true后，第二部分将求值并呈现组件。使用逻辑
&&
运算符，直到第一部分为true，第二部分才会求值。这是一种很好的、干净的条件呈现方法特别是在第一个条件下，你不想显示任何东西

如果你想展示一些关于卡片的东西（意味着渲染它）但是只有有条件地渲染速率组件，您可以在卡组件中使用卡组件获得的加载道具应用此逻辑。
仍在
中渲染，唯一要做的是隐藏或显示已渲染的
this.props.children
元素传递给它。
谢谢你的回复，但在我的真实应用程序中，我正在使用redux，并且
rate
的值是
undefined
，几秒钟后得到值。因此我可以在我的应用程序中设置
rate:0
state@mdck如果它是
未定义的
，并且您的组件需要
rate:PropTypes.number.isRequired
，那么您就需要很糟糕。是的，但我正在使用conditional来渲染子对象，如果loading设置为true，为什么会执行PropTypes？它可以工作，但是，我不明白为什么在RenderDok之前，我会在速率组件上出现这个错误，我已经编辑了我的答案，并按照@Cody Moniz所说的稍微扩大了一点。