在控制台日志中第一次单击时，react js useState 数组为空

Question

Please check my below code. I try to check the console log value, but in the first button click, the array is empty. After the second click the array will be loaded correctly.

Please check this:

sample

The above sample can be found on Google. I console log the value as below

Why is the array empty in the first click? Another question is, I need to print the value in the first click. How can I do it? Do you know any alternative method?

Answer 1

It's not empty on the first click but you can handle it this way :

const addItem = () => {
    setItem([
      ...items,
      {
        id: items.length,
        value: Math.floor(Math.random() * 10) + 1
      }
    ]);
  };

  React.useEffect(() => {
    console.log(items);
  }, [items]);

The useEffect hook will console log items after they've been changed so you will see the latest state or in other words the updated and final state .