Utilizzare useEffect con axios in React

Mattepuffo's logo
Utilizzare useEffect con axios in React

Utilizzare useEffect con axios in React

In React possiamo considerare  useEffect come il componentDidMount delle funzioni (se le usiamo al posto delle classi).

Forse non è tecnicamente correttissimo, ma la sostanza è quella.

Infatti, oggi, ho usato axios dentro useEffect quando sono passato dalle classi alle funzioni.

E possiamo anche considerare useState come il setState delle classi (e lo dico perchè useremo anche questo).

Dando per scontato che avete già installato axios:

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

export default function Home() {
    const [books, setBooks] = useState([]);

    useEffect(() => {
        async function getBooks() {
            const result = await axios.get('https://www.sito.it/api/file.php');
            setBooks(result.data.books)
        }
        getBooks();
    }, []);

    return (
        <Paper className={classes.root}>
            <Table className={classes.table} size="small">
                <TableBody>
                    {books.map(row => (
                        <StyledTableRow key={row.id}>
                            <StyledTableCell component="th" scope="row">
                                {row.title}
                            </StyledTableCell>
                            <StyledTableCell align="right">{row.author}</StyledTableCell>
                            <StyledTableCell align="right">{row.editor}</StyledTableCell>
                            <StyledTableCell align="right">{row.price}</StyledTableCell>
                            <StyledTableCell align="right">{row.isbn}</StyledTableCell>
                        </StyledTableRow>
                    ))}
                </TableBody>
            </Table>
        </Paper>
    );
}

Io ho renderizzato una tabella usando Material UI; voi sostituiteli con i vostri componenti.


Share this Post

Commentami!