响应defaultProps不按预期工作
响应defaultProps不按预期工作
提问于 2017-08-24 13:52:14
默认情况下，我希望我的lastMessage支柱是一个带有id的对象。但是下面的代码显示为null。
代码：
const App = ({ lastMessage }) => { // lastMessage is currently null
return (
<Message lastMessage={lastMessage} />
)
}
class Message extends Component {
constructor(props) {
super(props)
}
componentWillReceiveProps(nextProps) {
const data = [];
if (nextProps.lastMessage.id !== this.props.lastMessage.id) {
log.debug('woohoo');
// do something ...
}
}
render() {
return (
// something...
);
}
}
Message.defaultProps = {
lastMessage: {
id: 0,
},
};在我的App组件中，我将lastMessage作为null传递给Message组件。但是我在defaultProps组件中设置了Message：
Message.defaultProps = {
lastMessage: {
id: 0,
},我希望lastMessage是一个带有id的对象，但是它仍然是空的。然后我的应用程序崩溃了，因为如果nextProps.lastMessage.id是null的话，lastMessage就不能工作了
更奇怪的是，如果我删除我的应用程序组件中的lastMessage支柱：
const App = () => {
return (
<Message />
)
}然后，消息组件将lastMessage defaultProp创建为带有id的对象。
如果我的道具是空的，我试图用默认值传递它。我试过这样的方法，但还是没有用：
const App = ({ lastMessage = { id: 0 } }) => { // lastMessage is still null
return (
<Message lastMessage={lastMessage} />
)
}我是不是没有正确地设置defaultProps？
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-08-24 13:54:51
如果将null传递给Message组件，则基本上覆盖默认属性- lastMessage。如果我正确地理解了您，那么当您移除将lastMessage传递给Message组件时，它就会工作。它应该停在这边。
在将参数传递给组件之前，可以进行三元真实性检查：
<Message lastMessage={lastMessage ? lastMessage : undefined} />正如您已经知道的，您还可以通过这种方式传递默认道具：
<Message lastMessage={lastMessage ? lastMessage : { id: 0 }} />页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45871464
复制相关文章
相似问题
如何使用openpyxl返回列字母而不是列号？
如何使用列号引用Excel列而不是列字母
使用列号而不是列字母引用范围
如何添加列而不是openpyxl行？
使用列号而不是列名
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
