React array not changing with setState [duplicate]

Question

My array isn't getting new entries added to it via the setState getter.

Code:

let calledOut = false;
export default function PayStation () {
    const [records, setRecords] = useState([]);

    // problem snippet
    if (records.length === 0 && !calledOut) {
        calledOut = true;
        fetch('http://localhost:5000/api').then(
            response => response.json()
        ).then(
            data => {
                const payloadRecords = data["records"];
                // returning
                //     [{
                //         "attributes": {
                //             "type": "Contact",
                //             "url": "/services/data/v42.0/sobjects/Contact/0030U00001UPWYKQA5"
                //         },
                //         "Id": "0030U00001UPWYKQA5",
                //         "Name": "Contact25 Sequence Contact Manual Email"
                //     },
                //     {
                //         "attributes": {
                //             "type": "Contact",
                //             "url": "/services/data/v42.0/sobjects/Contact/0030U00001UPWYLQA5"
                //         },
                //         "Id": "0030U00001UPWYLQA5",
                //         "Name": "Contact26 Sequence Contact Manual Email"
                //     }
                // ]
                setRecords((records => [...records, ...payloadRecords]));
                console.log("records size: " + records.length); // why is this still 0?
            }
        );
    }
    // end problem snippet

    return (records.length === 0 ? "loading..." :
        <div style={{
            height: '100vh',
            display: 'flex',
            maxWidth: 600,
            justifyContent: 'space-between',
            alignItems: 'center'
        }} >
            {records}
        </div>
    );
}

I think the requirement for state to change is that you clone the state variable (which I believe I'm doing), as opposed to assigning a reference to it and mutating the reference.

So, why isn't my array getting new entries?

Try setRecords([...records, ...payloadRecords]); Instead of setRecords((records => [...records, ...payloadRecords])); — Marko Taht
– Marko Taht, Commented May 8, 2022 at 21:36
@MarkoTaht That shouldn't make a difference, in this case prevState gets the same data — Inder
– Inder, Commented May 8, 2022 at 21:39
@NicholasZozaya Are you actually receiving data from backend? Have you made a console log? — Inder
– Inder, Commented May 8, 2022 at 21:39
100% sure i'm getting 2 records from backend, revised the desc to show the payload — Nicholas Zozaya
– Nicholas Zozaya, Commented May 8, 2022 at 21:41

Stafford Rose · Accepted Answer · 2022-05-08 21:46:57Z

2

The body of the component should be a pure function. Side effects (such as data fetching) should be wrapped in useEffect. The following code should work:

export default function PayStation () {
  const [records, setRecords] = useState([]);

  useEffect(() => {
    const getRecords = () => {
      fetch('http://localhost:5000/api').then(
        response => response.json()
      ).then(
        data => {
          const payloadRecords = data["records"];
          setRecords((records => [...records, ...payloadRecords]));
        }
      );
    }
    
    getRecords()
  }, [])
  
  if (records.length === 0) return "loading..."

  return (
    <div style={{
      height: '100vh',
      display: 'flex',
      maxWidth: 600,
      justifyContent: 'space-between',
      alignItems: 'center'
    }} >
      {records.map((record) => <Record key={record.id} {...record} />)}
    </div>
  );
}

answered May 8, 2022 at 21:46

Stafford Rose

8176 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nicholas Zozaya Over a year ago

sorry, I'm still getting 0 records in my array after adding console.log below setRecords(), I expected the array to have some records in it...

Konstantin Over a year ago

It won't show because the state updates happen asynchronously, and the log is run when that variable is still not filled. But it doesn't mean that you don't have a value there.

Bas · Accepted Answer · 2022-05-08 21:49:48Z

2

The issue seems to be that useState and setState are both being ran in the same call... And since they're both async the setState isn't setting a value to anything since the state hasn't been created yet. If you removed the calledOut variable it should work fine.

This is generally bad way to do fetching. I recommend doing

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

So this will be invoked after the states are made.

answered May 8, 2022 at 21:49

Bas

1,4333 gold badges10 silver badges23 bronze badges

Collectives™ on Stack Overflow

React array not changing with setState [duplicate]

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related