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

Commentami!

About Mattepuffo.com

Blog dedicato all'informatica e alla programmazione!
Tutti i contenuti di questo blog, tranne casi particolari, sono sotto licenza Licenza Creative Commons Creative Commons Attribution-Noncommercial-Share Alike 2.5. .

2626 articoli
310 commenti
19 progetti
Altri link
  • About
  • Scrivimi
  • Copyright
  • Sitemap
  • matteo.ferrone@yahoo.it
  • GitHub
  • Privacy Policy