1

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

2 回答 2

2

带有空依赖数组的 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>;
于 2020-02-27T10:53:45.447 回答
0

在这里，我做了一些小的调整并写成功能组件来清楚地理解这个概念。

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

谢谢。

于 2020-02-27T11:39:58.473 回答