React - prop-types被标记为必需

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (125)

当我使用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

我想仅在loading设置为false时才渲染子元素。 编辑:我不明白为什么我在Rate组件上得到这个错误,直到它被渲染 我不明白为什么我得到这个错误。

感谢帮助

提问于
用户回答回答于

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

Rate.defaultProps = {
  rate: 0
};
用户回答回答于

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

扫码关注云+社区

领取腾讯云代金券