TypeError：无法读取未定义的属性“格式”答案

【问题标题】：TypeError: Cannot read property 'format' of undefinedTypeError：无法读取未定义的属性“格式”
【发布时间】：2021-09-11 11:43:20
【问题描述】：

从中获取错误，似乎无法弄清楚为什么这是未定义的。

它以前可以工作，但是一旦我将我的 const 样式用于表格单元格，它将为 fromDate 抛出未定义的错误。

有关如何解决此问题的任何指导？

以下引发的错误

  constructor(props) {
    super(props);
    this.state = {
      fromDate: `${props.date.format('YYYY-MM')}-01T00:00:00.000Z`,
      toDate: `${props.date.format('YYYY-MM-') + props.date.daysInMonth()}T00:00:00.000Z`,
    };
  }

有关类组件的完整详细信息

const styles = makeStyles({
  cell: {
    '& .MuiTableCell-root': {
      padding: '1px',
    },
  },
});

class Meetings extends React.Component {
  constructor(props) {
   ...
  }

  componentDidMount() {
   ...
  }

  getMeetingsList = () => {
   ...
  }

  onMeetingTitleClick = (event, meetingId) => {
   ...
  };

  render() {
    const {
      meetings, loading,
    } = this.props;
    const getMeetings = meetings => (
      Object.keys(meetings).map(meetingDate => (
        <MeetingsCard
          key={shortid.generate()}
          onMeetingTitleClick={this.onMeetingTitleClick}
          meetingDate={meetingDate}
          dayMeetings={meetings[meetingDate]}
        />
      ))
    );
    const tableTemplate = ({ classes }) => (
      <PerfectScrollbar>
        <Paper style={{ borderRadius: 0, boxShadow: 'none', height: 500 }}>
          <TableHead>
            <TableRow>
              <TableCell align="left" classes={{ root: classes.cell }} style={{ width: 250, fontWeight: 'bold' }}>Meeting Date</TableCell>
              <TableCell align="left" style={{ width: 260, fontWeight: 'bold' }}>Meeting Time</TableCell>
              <TableCell align="left" style={{ width: 520, fontWeight: 'bold' }}>Title</TableCell>
              <TableCell align="left" style={{ width: 730, fontWeight: 'bold' }}>Location</TableCell>
            </TableRow>
          </TableHead>
          <Table size="small">
            <TableBody>
              {getMeetings(meetings)}
            </TableBody>
          </Table>
        </Paper>
      </PerfectScrollbar>
    );
    // eslint-disable-next-line no-nested-ternary
    return (loading)
      ? <Skeleton page="Calendar" multiply={20} />
      : (!isEmpty(meetings)) ? tableTemplate() : <h1>No records found</h1>;
  }
}

const mapStateToProps = state => ({
  meetings: state.Meetings.meetings,
  loading: state.Meetings.meta.loading,
});

const mapDispatchToProps = dispatch => bindActionCreators({
  getMeetingList,
}, dispatch);

export default connect(mapStateToProps, mapDispatchToProps, withStyles(styles))(Meetings);

【问题讨论】：

你可以试试这个吗？ ${props.date.format('YYYY-MM-') + props.date.daysInMonth()}T00:00:00.000Z => ${props.date.format('YYYY-MM-') ${props.date.daysInMonth()}T00:00:00.000Z
那是哪个组件的构造函数？您是否甚至通过道具传递日期，如果是，则可能为空

标签： reactjs

【解决方案1】：

IIRC withStyles 是一个 material-ui HOC，这意味着你应该像这样使用它：

connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(Meetings))

或拆分声明以使其显而易见：

const MeetingsWithStyles = withStyles(styles)(Meetings);
const MeetingsConnected = connect(mapStateToProps, mapDispatchToProps)(MeetingsWithStyles);
export default MeetingsConnected;

具体来说，我认为您会收到此错误，因为 connect 的第三个参数是 mergeProps。它旨在合并 ownProps（由父母提供）和您从 mapStateToProps 和 mapDispatchToProps 获得的东西，然后将结果作为道具提供给连接的组件。所以如果你不返回一个对象，你就不会在连接的组件中得到任何道具。

通过提供一个不相关的函数（withStyles 调用结果）来代替 mergeProps，你正在搞乱你的组件道具，最终它根本没有任何道具。

No props => no props.date => 在构造函数中调用 props.date.format 时出错

编辑

您在这里遇到的另一个错误：

const tableTemplate = ({ classes }) => (

classes 由组件道具中的 withStyles 提供，因此从 this.props 以及 meetings 和 loading 中提取它（并将其从 tableTemplate 参数中删除）：

const {
  classes, meetings, loading,
} = this.props;

【讨论】：

是的，看起来你是对的。现在我得到 >>> 组件中发生了上述错误：正在尝试关注此堆栈溢出帖子，但我正在使用类组件stackoverflow.com/questions/49125789/…
我不明白，你现在得到哪个错误？
好的，我想我明白另一个问题是什么，请检查我的编辑部分
是的，认为它导致了另一个错误（React 检测到由 WithStyles(MyMeetings) 调用的 Hook 的顺序发生了变化。如果不修复，这将导致错误和错误。有关更多信息，请阅读规则钩子:)。但不用担心。如果我无法解决它，我会尝试更多地谷歌并发布另一个问题。感谢您的帮助！

【解决方案2】：

format of undefined

这显然意味着您的props.date 未定义。您应该检查传递它的父组件和 console.log 以验证传递的日期是否有效。

根据我的经验，我可以说这种错误主要是由于某种拼写错误而发生的。

【讨论】：