Моя переменная еще не обновилась, когда я создаю свою функцию onClick, так как useEffect запускается последним

Question

Я совершенно новичок в ReactJS. Пожалуйста, будьте добры, я действительно не смог найти ответ на мою проблему.

В useEffect я обновляю свою переменную (которая является массивом объектов), и в моей функции onClick я хочу обновить свою переменную снова.

Поскольку useEffect запускается после создания функции onClick, моя переменная по-прежнему пуста в onClick. Мне нужно иметь доступ к моей обновленной переменной в моей функции onClick.

Как я могу сначала обновить свою переменную в useEffect, прежде чем создавать свою функцию onClick?

const [myvariable, setMyvariable] = useState([{}]);

useEffect({
    setMyVariable([{
       id: 1
    }]);
}, []);

const onClick = () => {
    // update my variable here
    setMyVariable(prev => [...prev, {name: 'My name'} ]); // <-- Code here is probably not correct but you get the idea. 
    // prev is an empty object at this point since useEffect has not run yet
}

Answer 1

useEffect с пустым массивом зависимостей выполняется для запуска после монтирования компонента, его нельзя запустить до рендеринга. И вы определяете функцию onClick, а не запускаете ее, чтобы она не меняла состояние. Есть ли причина, по которой вы не устанавливаете начальное состояние при его инициализации?

const [myvariable, setMyvariable] = useState({id: 1});

Так вот как это происходит:

const [myvariable, setMyvariable] = useState([});
const loadData = () => {
  fetch(`${process.env.REACT_APP_API_URL}`, {
    method: "Get"
  })
    .then(res => {
      return res.json();
    })
    .then(resData => {
      if (resData.errors) {
        throw new Error("error.");
      }
      setMyvariable([...resData]);
    });
};
useEffect(() => {
  loadData(); // Fetchs after mount
}, []);
// Fetchs on click
return <button onClick={loadData}>Fetch</button>;

Answer 2

Здесь я делаю небольшие изменения и пишу как функциональный компонент, чтобы ясно понять концепцию.

import React, {useState,useEffect} from 'react';

const changeName=()=>{

    const [myvariable, setMyvariable] = useState({});

    useEffect(()=>{
        setMyvariable({id:"1"});
        },[]);

const onClick = () =>{
    setMyvariable({name:"myName"});

};

    return (
        <div>
            <h1>{myvariable.name}</h1>
            <button onClick={()=>onClick()}>click me</button>
        </div>
    )

};

export default changeName;

Первоначально myvariable установлен в {} с использованием useState hook

когда монтируется этот компонент, вызывается ловушка useEffect и изменяется объект на

{id:"1"}

Затем, когда вы нажимаете кнопку, вызывается функция setMyvariable и изменяется объект на

{id:1,name:"myName"}

Вы можете ясно видеть обновления / изменения в теге h1. Пожалуйста, дайте мне знать, если вы не поняли / не должны ясно понимать эту концепцию.

Спасибо.