TypeError：无法读取未定义的属性“状态” - 函数答案

【问题标题】：TypeError: Cannot read property 'state' of undefined - functionTypeError：无法读取未定义的属性“状态” - 函数
【发布时间】：2020-01-17 20:39:13
【问题描述】：

    import React from 'react';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import IconButton from '@material-ui/core/IconButton';
import Typography from '@material-ui/core/Typography';
import SkipPreviousIcon from '@material-ui/icons/SkipPrevious';
import PlayArrowIcon from '@material-ui/icons/PlayArrow';
import SkipNextIcon from '@material-ui/icons/SkipNext';

const useStyles = makeStyles(theme => ({
  card: { 
    position: 'fixed',
    zIndex:999,
    bottom: theme.spacing(2),
    left: theme.spacing(2),
    display: 'flex',
    maxWidth:'300px',
  },
  details: {
    display: 'flex',
    flexDirection: 'column',
  },
  content: {
    flex: '1 0 auto',
  },
  cover: {
    width: 151,
  },
  controls: {
    display: 'none',
    alignItems: 'center',
    paddingLeft: theme.spacing(1),
    paddingBottom: theme.spacing(1),
  },
  playIcon: {
    height: 38,
    width: 38,
  },
}));

export default function MediaControlCard() {
  const classes = useStyles();
  const theme = useTheme();
  const state = {
    count: 0,
  }

  const componentDidMount = () => {
    this.interval = setInterval(() => {
      this.setState(({ count }) => ({ count: count + 1 }));
    }, 1000);
  }
  const componentWillUnmount = () => {
    clearInterval(this.interval);
  }
  return (
    <Card className={classes.card}>
      <CardMedia
        className={classes.cover}
        image="//storage.googleapis.com/radiomediapodcast/budcast/BudCast.png"
        title="Live from space album cover"
      />
      <div className={classes.details}>
        <CardContent className={classes.content}>
          <Typography id="Now_Playing_Title" component="h5" variant="h5">
            Live From Space  {this.state.count}
          </Typography>
          <Typography id="Now_Playing_Artist" variant="subtitle1" color="textSecondary">
            Mac Miller
          </Typography>
        </CardContent>
        <div className={classes.controls}>
          <IconButton aria-label="previous">
            {theme.direction === 'rtl' ? <SkipNextIcon /> : <SkipPreviousIcon />}
          </IconButton>
          <IconButton aria-label="play/pause">
            <PlayArrowIcon className={classes.playIcon} />
          </IconButton>
          <IconButton aria-label="next">
            {theme.direction === 'rtl' ? <SkipPreviousIcon /> : <SkipNextIcon />}
          </IconButton>
        </div>
      </div>

    </Card>
  );
}

我收到以下错误TypeError: Cannot read property 'state' of undefined

【问题讨论】：

标签： reactjs components setstate

【解决方案1】：

您不能在函数组件中使用生命周期方法或状态。

考虑使用类组件。

export default class MediaControlCard {
  const classes = useStyles();
  const theme = useTheme();

  constructor(props) {
    this.state = {
      count: 0,
    }
  }

  componentDidMount() { /*...*/ }
  componentWillUnmount() { /*...*/ }

  render() {
    return ( /*...*/ )
  }
}

或者使用 Hooks。 https://reactjs.org/docs/hooks-intro.html

export default function MediaControlCard() {
  const classes = useStyles();
  const theme = useTheme();
  const [count, setCount] = React.useState(0);

  let interval = null;
  React.useEffect(() => {
    interval = setInterval(() => {
      setCount(count + 1);
    }, 1000);

    return () => clearInterval(interval);
  });

  return (/*...*/)
}

【讨论】：

【解决方案2】：

您正在使用具有生命周期方法的功能组件。生命周期方法只能与类组件一起使用，因此将功能组件转换为类组件将为您工作。声明你的组件和下面的例子一样

  class DemoClass extends React.Component {
  constructor(props) {
    this.state = {
      count: 0,
    }
  }

  componentDidMount() { /*...*/ }
  componentWillUnmount() { /*...*/ }

  render() {
    return ( /*...*/ )
  }
}
export default DemoClass

【讨论】：