reactjs - 执行应用程序时 PropTypes 验证失败
问题描述
我正在尝试react hooks
在一个简单的应用程序中使用。这是对我写的代码的引用:
MyApp
const styles = theme => ({
root: {
...theme.mixins.gutters(),
paddingTop: theme.spacing.unit * 2,
paddingBottom: theme.spacing.unit * 2
},
button: {
margin: theme.spacing.unit
}
});
function PaperSheet(props) {
const [open, setOpen] = useState(false);
const { classes } = props;
const { title, data } = props;
return (
<div>
<Paper className={classes.root} elevation={1}>
<Typography align="center" variant="h3" component="h3">
{title}
</Typography>
<Typography align="center" component="p">
What is the result of :
{`${math.ceil(data[0])} + ${math.ceil(data[1])}`}
</Typography>
<TextField
id="outlined-full-width"
label="Result"
style={{ margin: 8 }}
fullWidth
margin="normal"
variant="outlined"
InputLabelProps={{
shrink: true,
required: true
}}
/>
<Button
variant="contained"
color="primary"
className={classes.button}
onClick={() => {
setOpen(true);
}}
>
Submit
</Button>
<Modal open={open} closeModel={() => setOpen(false)} />
</Paper>
</div>
);
}
PaperSheet.propTypes = {
classes: PropTypes.objectOf(PropTypes.string.isRequired).isRequired,
title: PropTypes.string.isRequired,
data: PropTypes.arrayOf(PropTypes.number.isRequired).isRequired
};
function getModalStyle() {
const top = 50;
const left = 50;
return {
top: `${top}%`,
left: `${left}%`,
transform: `translate(-${top}%, -${left}%)`
};
}
const styles = theme => ({
paper: {
position: "absolute",
width: theme.spacing.unit * 50,
backgroundColor: theme.palette.background.paper,
boxShadow: theme.shadows[5],
padding: theme.spacing.unit * 4
}
});
const SimpleModal = props => {
const { classes, open, closeModel } = props;
console.log("open: ", open);
return (
<div>
<Modal
aria-labelledby="simple-modal-title"
aria-describedby="simple-modal-description"
open={open}
onClose={closeModel}
>
<div style={getModalStyle()} className={classes.paper}>
<Typography variant="h6" id="modal-title">
Text in a modal
</Typography>
<Typography variant="subtitle1" id="simple-modal-description">
success
</Typography>
<SimpleModalWrapped />
</div>
</Modal>
</div>
);
};
SimpleModal.propTypes = {
classes: PropTypes.shape({ paper: PropTypes.string }).isRequired,
open: PropTypes.bool.isRequired,
closeModel: PropTypes.func.isRequired
};
// We need an intermediary variable for handling the recursive nesting.
const SimpleModalWrapped = withStyles(styles)(SimpleModal);
当我运行应用程序并单击Submit
按钮时,我收到此错误:
Warning: Failed prop type: The prop `open` is marked as required in `SimpleModal`, but its value is `undefined`.
in SimpleModal (created by WithStyles(SimpleModal))
in WithStyles(SimpleModal) (created by SimpleModal)
这个错误是由于modal
组件的第一次渲染造成的吗?如果是这样,我该如何解决?
解决方案
似乎问题是由文件<SimpleModalWrapped />
第 46 行的递归调用引起的modal.jsx
。
没有道具被传递给这个组件,这会触发 PropType 警告。
推荐阅读
- docker - 添加 Jenkins 管道执行的 conda-forge “conda/miniconda3” docker 映像时出现权限错误
- vue.js - 如何在 vue 3 中获取 this 实例?
- mongodb - 如何获取日期范围内的 MongoDB 条目,包括限制?
- android - BitmapFactory 为 ARGB 字节数组返回空位图 (Android)
- selenium - 从谷歌工作表和硒中提取数据以写入网页
- c++ - c++ 将结构推送到向量然后保存到输出文件的问题
- java - 在couchbase中保存为二进制的对象
- php - 尝试从 apache 服务器运行时 PHP intl 不起作用
- sql-server - Powershell Backup-SqlDatabase 备份快照而不是完整备份
- asp.net-core-mvc - 如何显示从视图到控制器的嵌套视图模型