当我创建我的 onClick 函数时，我的变量还没有更新，因为 useEffect 是运行最后一个

Question

我是 ReactJS 的新手。请客气，我真的找不到我的问题的答案。

在 useEffect 中，我更新了我的变量（这是一个对象数组），在我的 onClick 函数中，我想再次更新我的变量。

由于 useEffect 在我创建我的 onClick 函数后运行，我的变量在 onClick 上仍然是空的。我需要能够在我的 onClick 函数中访问我更新的变量。

如何在创建 onClick 函数之前先更新 useEffect 中的变量？

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 函数，而不是运行ning 它，因此它不会更改状态。初始化的时候不设置初始状态是什么原因？

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;

最初使用 useState 挂钩 myvariable 设置为 {}

当此组件安装时调用 useEffect 挂钩并将对象更改为

{id:"1"}

然后当您单击按钮时，调用 setMyvariable 函数并将对象更改为

{id:1,name:"myName"}

h1标签中的updates/changes可以看的很清楚。如果您不明白/需要清楚地理解这个概念，请告诉我。

谢谢。

当我创建我的 onClick 函数时，我的变量还没有更新，因为 useEffect 是运行最后一个

My variable has not updated yet when I create my onClick function since useEffect is run last

reactjs

use-effect

use-state

当我创建我的 onClick 函数时，我的变量还没有更新，因为 useEffect 是 运行 最后一个

My variable has not updated yet when I create my onClick function since useEffect is run last

reactjs

use-effect

use-state

当我创建我的 onClick 函数时，我的变量还没有更新，因为 useEffect 是运行最后一个