React - prop-types被标记为required
当我使用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组件上会出现这个错误
我不明白为什么我会得到这个错误。
感谢你的帮助
回答 3
Stack Overflow用户
发布于 2018-06-10 07:10:48
暂时可以使用默认的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组件获得的加载属性来应用这个逻辑。
Stack Overflow用户
发布于 2018-06-10 08:15:35
<Rate>仍然在<App>中呈现，<Card>唯一要做的就是隐藏或显示传递给它的已经呈现的this.props.children元素。
Stack Overflow用户
发布于 2018-06-10 06:36:53
您正在尝试使用与<App />中的this.state.rate相等的rate属性加载<Rate />组件。您的应用程序组件状态没有为this.state.rate设置任何内容，所以当<Rate />期望PropTypes.Number时，它实际上得到的是undefined。这就是它抱怨的原因。
要解决此问题，您可以将<App />的状态设置为如下所示：
state = {
loading: true
rate: 0,
};https://stackoverflow.com/questions/50779057
复制相似问题