DEV Community

setState in Reactjs is not a function

Sai Avinash Duddupudi on December 22, 2020

I'm new to react and I am trying to hit an API using fetch and then setState to a state variable but it is throwing the error as Unhandled Reject...
Read full post
Collapse
 
syntaxhacker profile image
syntaxhacker •

if you are new to react dont bump into react hooks at first . read and follow some react introduction posts on this platform and by the way setState is not a react function .

working code

import React from "react";
import { useState } from "react";
import "./styles.css";

export default function App() {
  const [person, setPerson] = useState([]);
  fetch("https://jsonplaceholder.typicode.com/users")
    .then((response) => {
      return response.json();
    })
    .then((data) => {
      setPerson(data);
    });
  console.log("dasdasd", person);
  return <div className="App">{JSON.stringify(person)}</div>;
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
saiavinashiitr profile image
Sai Avinash Duddupudi • • Edited

hey, when I ran this code, it is repeatedly hitting the API and never stopping. I want it to run only once

Collapse
 
syntaxhacker profile image
syntaxhacker • • Edited

If you only want to run useEffect once , you can give it an empty array as second argument.

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        setPerson(data);
      });
  }, []);
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
saiavinashiitr profile image
Sai Avinash Duddupudi • • Edited

yes thanks for useeffect, Now I wanted to pass this person to customers state variable but it is rendering as empty which is exactly why I have not used useEffect in the first place {"data":[]}

import React from "react";
import { useState, useEffect } from "react";
// import "./styles.css";

export default function App() {
  const [person, setPerson] = useState([]);
  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        setPerson(data); // You Need this For set Person to `state person`
      });
  }, []);
  console.log("dasdasd", person);
  const [customers, setCustomers] = useState({ data: person });
  return <div className="App">{JSON.stringify(customers)}</div>;
}
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
buraksaraloglu profile image
Burak Saraloglu •

You can check for data !== null && return (...) for conditional rendering. Since it will rerender after data loaded, it would also prevent from empty rendering.

Thread Thread
 
saiavinashiitr profile image
Sai Avinash Duddupudi • • Edited

It is being empty forever, not re-rendering at all.

Collapse
 
emmanuelthecoder profile image
Emmanuel Aiyenigba •

No. It won't work that way. setState() cannot be called with React hooks.
const [person, setPerson] = useState([])
In the state hook method, the second parameter (in this case setPerson) is what is used to change/update the state.
Now instead of setState(data), do setPerson(data) and it should work just fine.

Collapse
 
saiavinashiitr profile image
Sai Avinash Duddupudi •

The reason I am not using setPerson is because it has be wrapped under useEffect hook but I want to pass this person data to another useState Variables.

Since useState happens in initial load, if we use useEffect I wont be able to pass data to useState variables

Collapse
 
sirseanofloxley profile image
Sean Allin Newell •

You still need setPerson. Basically with a functional component using hooks, setState is not defined. Hence your type error.