当我使用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组件上会出现这个错误
我不明白为什么我会得到这个错误。
感谢你的帮助
发布于 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组件获得的加载属性来应用这个逻辑。
发布于 2018-06-10 08:15:35
<Rate>
仍然在<App>
中呈现,<Card>
唯一要做的就是隐藏或显示传递给它的已经呈现的this.props.children
元素。
发布于 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
复制相似问题