创建 onClick 函数时，我的变量尚未更新，因为 useEffect 最后运行答案

【问题标题】：My variable has not updated yet when I create my onClick function since useEffect is run last创建 onClick 函数时，我的变量尚未更新，因为 useEffect 最后运行
【发布时间】：2020-06-11 07:24:34
【问题描述】：

我对 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
}

【问题讨论】：

你说的没有道理。 myVariable 不是一个数组，它是一个对象。你的使用效果会立即设置为{id: 1}。您的变量在onClick 函数中不是“仍然为空”，因为该函数调用setMyVariable 并传递prev，它始终是最新的状态值。你在这里面临什么问题？是否有错误或您的应用程序以意想不到的方式执行？还是您只是担心onClick 函数中的变量不正确？
每次组件更新时都会重新创建您的 onClick 函数，并且每次状态更改时组件都会更新，因此您的 onClick 函数始终可以访问最新状态。
@JMadelaine 抱歉，我的代码没有完全按照我的情况进行 - 我现在进行了编辑，因为它是一个数组。我找到了变量似乎“仍然为空”的原因 - 当您在 onClick 中控制台记录变量时，变量为空，尽管如果您使用它或在 h1 标签中显示它，它是预期的值在 useEffect 中设置。

标签： reactjs use-effect use-state

【解决方案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>;

【讨论】：

感谢您的快速和友好的回复。我的变量数据来自 API 调用，因此我无法将初始状态设置为最终值。

【解决方案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 挂钩

设置为 {}

当这个组件挂载时调用useEffect钩子并将对象更改为

{id:"1"}

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

{id:1,name:"myName"}

您可以清楚地查看 h1 标签中的更新/更改。如果您不理解/需要清楚地理解这个概念，请告诉我。

谢谢。

【讨论】：