当我使用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时渲染子元素。
EDIT :在呈现之前,我不明白为什么在Rate组件上会出现这个错误
我不明白为什么我会得到这个错误。
感谢你的帮助
https://stackoverflow.com/questions/50779057
复制相似问题