Вызов функции при монтировании в ReactJS

Question

У меня проблема с вызовом функции, когда компонент загружается на 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>
    );
  }

Answer 1

Метод жизненного цикла componentDidMount() используется только в компонентах на основе классов. Вы можете использовать хук useEffect с пустым массивом зависимостей для загрузки вашей функции при монтировании компонента.

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

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

Примечание. useEffect - это сокращение от use side effect. useEffect позволяет нам комбинировать методы жизненного цикла componentDidMount и componentDidUpdate.

Проблемы:

• Если вы не передаете переменную в массив зависимостей, он будет вызываться только при первом рендеринге точно так же, как componentDidMount, иначе ловушка будет срабатывать каждый раз, когда значение в массиве зависимостей изменяется.
• Если вы не передаете массив в useEffect хук, компонент будет повторно загружаться.

Answer 2

Вы не можете использовать методы жизненного цикла, такие как 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>
 ....