执行应用程序时 PropTypes 验证失败

Question

我正尝试在一个简单的应用程序中使用 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 组件的第一次渲染造成的吗？如果是这样，我该如何解决？

Answer 1

看来问题是modal.jsx文件第46行<SimpleModalWrapped />的递归调用引起的。

没有道具被传递到这个组件，这会触发 PropType 警告。

执行应用程序时 PropTypes 验证失败

PropTypes validation failed when executing the application

reactjs

react-proptypes

react-hooks