0

在 ReactJS 上加载组件时调用函数时出现问题。我尝试使用 componentDidMount() 并且编译时出错。请在下面检查我的代码。谢谢

export default function Customers() {
    const classes = useStyles();
    const searchBarStyles = useStyles2();
    const [page, setPage] = React.useState(0);
    const [rowsPerPage, setRowsPerPage] = React.useState(10);
    const dispatch = useDispatch();

    const handleChangePage = (event, newPage) => {
      setPage(newPage);
    };

    const handleChangeRowsPerPage = (event) => {
      setRowsPerPage(+event.target.value);
      setPage(0);
    };

    const fetch = () => {
      dispatch(fetchPendingAdmissions());
    };

    componentDidMount() {
        fetch()
    }

    return (
      <div>
        <h1 className={classes.h1}>Customers</h1>
        <Paper component="form" className={searchBarStyles.root}>
          <InputBase
            className={searchBarStyles.input}
            placeholder="Search..."
            inputProps={{ 'aria-label': 'search...' }}
          />
          <IconButton type="submit" className={searchBarStyles.iconButton} aria-label="search">
            <SearchIcon />
          </IconButton>
        </Paper>
        <Paper className={classes.root}>
          <TableContainer className={classes.container}>
            <Table stickyHeader aria-label="sticky table">
              <TableHead>
                <TableRow>
                  <TableCell>Name</TableCell>
                  <TableCell>ID</TableCell>
                  <TableCell>Order Date</TableCell>
                  <TableCell>Actions</TableCell>
                  <TableCell></TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                <TableRow>
                  <TableCell>Robert</TableCell>
                  <TableCell>1324171354</TableCell>
                  <TableCell>07-21-20</TableCell>
                  <TableCell>
                    <Button onClick={fetch} variant="contained" color="primary" startIcon={<VisibilityIcon />}>
                      View
                    </Button>
                  </TableCell>
                  <TableCell>
                    <Button variant="contained" className={classes.buttonSuccess} startIcon={<ThumbUpIcon />}>
                      Approve
                    </Button>
                    <Button variant="contained" className={classes.buttonError} startIcon={<CancelIcon />}>
                      Decline
                    </Button>
                  </TableCell>
                </TableRow>
              </TableBody>
            </Table>
          </TableContainer>
          <TablePagination
            rowsPerPageOptions={[10, 25, 100]}
            component="div"
            count={10}
            rowsPerPage={rowsPerPage}
            page={page}
            onChangePage={handleChangePage}
            onChangeRowsPerPage={handleChangeRowsPerPage}
          />
        </Paper>
      </div>
    );
  }
4

2 回答 2

1

生命componentDidMount()周期方法仅用于基于类的组件中。您可以使用useEffect带有空依赖项数组的钩子在组件挂载时加载您的函数。

import React, {useState, useEffect} from 'react'

useEffect(() => {
  fetch();
}, []);

注：useEffect是use side effect. useEffect允许我们组合componentDidMount和componentDidUpdate生命周期方法。

陷阱：

  • 如果你不将任何变量传递给依赖数组，它只会在第一次渲染时被调用，componentDidMount否则每次依赖数组中的值发生变化时都会触发钩子。
  • 如果你不将数组传递给useEffect钩子，组件将被重复重新加载。
于 2020-05-27T04:32:40.113 回答
0

您不能在功能组件中使用诸如 componentDidMount 之类的生命周期方法。你必须使用useEffect

您更新的代码

import React, {useEffect} from 'react'
export default function Customers() {
    const classes = useStyles();
    const searchBarStyles = useStyles2();
    const [page, setPage] = React.useState(0);
    const [rowsPerPage, setRowsPerPage] = React.useState(10);
    const dispatch = useDispatch();

    const handleChangePage = (event, newPage) => {
      setPage(newPage);
    };

    const handleChangeRowsPerPage = (event) => {
      setRowsPerPage(+event.target.value);
      setPage(0);
    };

    const fetch = () => {
      dispatch(fetchPendingAdmissions());
    };

    useEffect(() => {
        fetch().then(result => {
            setRowsPerPage(result.blah)
        })
    }, [])

    // componentDidMount() { //<--------- remove this.
    //     fetch()
    // }

    return (
      <div>
 ....
于 2020-05-27T04:34:28.470 回答