Reactjs 对REACT中的变量范围感到困惑吗？

我在返回之前定义了一个常量（但当我试图呈现它时，得到了一个未定义的错误）

我正在为REACT的概念而挣扎。在返回之前定义的任何常量或变量都不能在中渲染

是否只有setState变量可用于渲染

下面是代码..我从API数据中保存了var countryname，但是当我试图呈现它时，会说UNDEFINED

./src/components/CountryPanel.jsx 第83:49行：“countryname”未定义无未定义

export default function CountryPanel(props) {
  const classes = useStyles();
  
  let countryCode = props.countryCode

  let url =
      "https://api.thevirustracker.com/free-api?countryTotal=" + countryCode;
  const [globalData, setGlobalData] = useState({});
  const [countryName, setCountryName] = useState("");
    
  useEffect(() => {
   
    getData(url);

    async function getData(url) {
      const response = await fetch(url);
      let data = await response.json(); // convert to json
      const countryname = data.countrydata[0].info.title;
      delete data.countrydata[0].info;
      setCountryName(countryname);
      setGlobalData(data.countrydata[0]);
    }
  }, []);

  return (
    <div className={classes.root}>
      <h3>
        Stats for: {countryCode} {countryName} {countryname}
      </h3>

导出默认功能国家面板（道具）{
const classes=useStyles（）；
让countryCode=props.countryCode
让url=
"https://api.thevirustracker.com/free-api?countryTotal=“+国家代码；
const[globalData，setGlobalData]=useState（{}）；
const[countryName，setCountryName]=useState（“”）；
useffect（（）=>{
获取数据（url）；
异步函数getData（url）{
const response=等待获取（url）；
let data=wait response.json（）；//转换为json
const countryname=data.countrydata[0].info.title；
删除数据。countrydata[0]。信息；
setCountryName（countryname）；
setGlobalData（data.countrydata[0]）；
}
}, []);
返回(
{countryCode}{countryName}{countryName}的统计信息

最后三个是未定义的，尽管我从API数据中保存了它 const countryname=data.countrydata[0].info.title；（…name-n小写）

---

首先，

setState

不是变量，但是我们需要

const

来定义

state

例如：

const[isLoading，setIsLoading]=useState（true）；

isLoading

默认为

true

，可与

setIsLoading

一起更改

---

另一个例子是

constfoo='bar'；

在此场景中，

foo

无法更改为其他值

---

---

希望您能理解。

问题在于

countryname

（与

countryname

分开）只适用于您的函数

getData

。JavaScript中的变量适用于它们所定义的函数/块，具体取决于您如何声明它们（var vs let/const）。在这种情况下，

countryName

在您的组件中随处可见，而

countryName

仅在

getData

中可用。这是一个JavaScript ism，与您使用React无关。

您可以添加代码吗？我的问题是：为什么React说“countryName未定义”。我从“return”之前的API数据。return（Stats for:{countryCode}{countryName}{countryName}我没有得到我的问题的答案，我的问题是：为什么我不能呈现/显示{countryName}？？？为什么我必须将它保存到STATE才能呈现它？？有没有一种不保存到STATE就呈现它的方法？？return（统计：{countryCode}{countryName}{countryName}感谢您的澄清。这就是我如何定义如上所示的状态谢谢。我明白了。那么，在“RETURN”之后使用countryName是否正确（”，必须将其设置为状态？我不太清楚您在这里的意思。在这种情况下，无法返回

countryname

。您将其传递给

setCountryName

，这将产生在下一次渲染时为

countryname

提供与

countryname

相同的值的效果。

useffect

挂钩将不起作用您无法返回回调返回的内容，因此无法将其恢复到相同的作用域。即使您在

useffect

之外定义了

countryname

，它也没有值，直到承诺解决后才有值。这意味着在您尝试从

render

返回时，它将不可用。如果您的意思是可以使用

counttryname

返回后，从技术上讲，这也不是真的。在当前返回元素（返回将呈现的元素）后，这些变量都不在范围内。React将异步（最终）进行反应将值

countryname

指定给可用于在下一次渲染时检索

counrtryName

的对象。变量

countryname

不能在

setData

之外使用，因为现在的情况是这样。我也不认为有任何理由（或其中的任何值）。只需去掉

{countryname}

在渲染中，应该没有问题。您正在将

countryName

设置为与

countryName

完全相同的值（通过将其传递给

setCountryName

），因此没有理由在

setData

之外引用

countryName