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

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标签中的更新/更改。如果您不清楚/不需要清楚地理解这个概念，请告诉我。

谢谢。

自从上次运行useEffect以来，我创建onClick函数时我的变量尚未更新

2 个答案: