React empty state - State stays null after setState

Question

I removed the imports because they are not a problem

In my render, I set my state and it shows it to me in the console, but when I try to map it, it is null and it says to me that there are no elements in the state "allInfo", how can I fix this error so that my state updates?

class Friends extends Component {

constructor(props) {
    super(props)
    this.state = {
        allInfo: []
    }
}

render() {

    fetch('https://localhost:44314/api/Users')
        .then(response => response.json())
        .then(data => {
            this.setState(prevState => {
                allInfo: data.map((obj) => { prevState.allInfo.push(obj) })
            })
        })

return (
    <div>
        <NavMenu />
        <div style={{ fontSize: 38, textAlign: "center", color: "white" }}>FRIENDS</div>
        <TableContainer component={Paper}>
            <Table aria-label="simple table">
                <TableHead>
                    <TableRow>
                        <TableCell>Users</TableCell>
                        <TableCell align="right">Follow</TableCell>
                    </TableRow>
                </TableHead>
                <TableBody>
                    {this.state.allInfo.map((row) => (
                        <TableRow key={row.username}>
                            <TableCell component="th" scope="row">
                                {row.username}
                            </TableCell>
                            <TableCell align="right">Follow?</TableCell>
                        </TableRow>
                    ))}
                </TableBody>
            </Table>
        </TableContainer>
  </div>
);

} }

export default Friends

Every state update triggers a render. You are doing update state in render and that will result in an infinite loop. Take the fetch code out and put it in some lifecycle method like componentDidMount. — Subin Sebastian, Apr 06 '20 at 17:45

score 1 · Answer 1 · answered Apr 06 '20 at 17:42

fetch('https://localhost:44314/api/Users')
    .then(response => response.json())
    .then(data => {
        this.setState(prevState => {
            allInfo: data.map((obj) => { prevState.allInfo.push(obj) })
        })
    })

Push returns the length of the array.

You should just use:

this.setState(prevState => {
            allInfo: data
        })

score 0 · Answer 2 · answered Apr 06 '20 at 17:39

0

Man many things, you are using fetch and then, that's not recommended any more, use


async render() {

   let response = await fetch('https://localhost:44314/api/Users')
            this.setState(prevState => {
                allInfo: data.map((obj) => { prevState.allInfo.push(obj) })
            })

but more explaining your problem, you this reference is not part of the then scope, so you are acessing a null value, wich will give you an error.

answered Apr 06 '20 at 17:39

guilherme victor ramalho natal

329
3
12

why would using a fetch with then not be recommended? – Batzz Apr 06 '20 at 17:42
I'll give you this link https://hackernoon.com/6-reasons-why-javascripts-async-await-blows-promises-away-tutorial-c7ec10518dd9, you can conclude anything – guilherme victor ramalho natal Apr 06 '20 at 17:44
sure its more aesthetically pleasing but you can do it either way, async/await is just syntactic sugar for promises – Batzz Apr 06 '20 at 17:46
well it's not just that, you have a scope problem, using promisse then, you mess up the scope. with async await you can use your function scope (variables). – guilherme victor ramalho natal Apr 06 '20 at 17:48

React empty state - State stays null after setState

2 Answers2

Linked