尝试设置 React Usestate 变量，但它保持为空 [重复]答案

【问题标题】：Trying to set React Usestate variable, but it stays empty [duplicate]尝试设置 React Usestate 变量，但它保持为空 [重复]
【发布时间】：2022-01-14 19:19:25
【问题描述】：

我是 React 新手，我不明白这一点：

我写

const [imageURL,setImageURL] = useState('');

和

 
var temp = "https://" + response.value.cid + ".ipfs.dweb.link/" + response.value.files[0].name;
                                setImageURL(temp)
                                console.log("Set ImageURL to: ", temp);
                                console.log("imageURL shows: ", imageURL);

但显然我没有抓住重点，因为我得到了一个空变量imageURL：

如果有人可以向我解释一下，将不胜感激：) 谢谢！

【问题讨论】：

您在哪里设置图片网址？
@HassaanAli 我虽然 setImageURL() 正是这样做的？ Tushar Shahi ...所以问题是它没有立即更新吗？然后我将如何使用上面的代码从这里开始工作？包裹异步函数并等待它？
这是原始问题。我需要在imageURL 变量中获取一个 URL，但它不起作用。 fetch("https://api.nft.storage/upload", options) .then((response) => response.json()) .then((response) => {console.log("Debugging."); console.log(response); console.log(response.value.cid); var temp = "https://" + response.value.cid + ".ipfs.dweb.link/" + response.value.files[0].name; setImageURL(temp) console.log("Set ImageURL to: ", temp); console.log("imageURL shows: ", imageURL);
React 状态更新是异步处理的，它们不是即时的。在更新入队后立即记录状态只会记录当前渲染周期的状态值。

标签： javascript reactjs react-hooks use-state

【解决方案1】：

您无法立即在 react 中获取最新状态。当您设置状态时，它是一个异步操作，它不会立即在下一行中为您提供值。为了根据你状态的最新变化执行某事，你需要像这样使用 useEffect：

const [imageURL,setImageURL] = useState('');
let temp = "https://" + response.value.cid + ".ipfs.dweb.link/" + response.value.files[0].name;
console.log("Set ImageURL to: ", temp);
setImageURL(temp);

//The latest change would show up inside useEffect here
useEffect(() => {
  console.log("imageURL shows: ", imageURL);
}, [imageURL])

useEffect 中的代码将在每次状态更新时执行，因为您将状态作为依赖项传递。去搜索useEffect。有很多关于这方面的资源。

【讨论】：

那没用。 “错误：无效的钩子调用。只能在函数组件的主体内部调用钩子。”
你把它放在哪里了？你应该把所有的钩子放在你的组件函数中。将 useEffect 放在 return JSX 之前以及您所做的所有定义之后。

【解决方案2】：

您传递给 useState() 函数的空字符串是首先分配给 imageURL 的值。你需要调用 setImageURL() 来设置它，或者传入一个特定的初始值。

【讨论】：

我调用 setImageURL(temp) 来设置它，但似乎它没有立即更新......
改变状态总是异步的，这意味着调用 setImageURL 将导致组件刷新，然后值将可用。您可能希望在 useEffect() 挂钩中调用 setImageURL，该挂钩在每次刷新时调用。