对 REACT 中的变量范围感到困惑？答案

【问题标题】：Confused about the variable scope in REACT?对 REACT 中的变量范围感到困惑？
【发布时间】：2020-07-06 04:10:29
【问题描述】：

我在 return 之前定义了一个 const( 但是当我尝试渲染它时，得到它未定义的错误。

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

是不是只有 setState 变量可以渲染？

这是代码。我从 API 数据中保存了 var countryname，但是当我尝试渲染它时，显示为 UNDEFINED

./src/components/CountryPanel.jsx 第 83:49 行：'countryname' 未定义 no-undef

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>

最后三个是未定义的，虽然我是从 API 数据中保存的 const countryname = data.countrydata[0].info.title; (..name - n 小写)

【问题讨论】：

你能添加你的代码吗？
我的问题是：为什么反应说“国家名称未定义”。我在“返回”之前从 API 数据中保存了它。返回 (

统计信息：{countryCode} {countryName} {countryname}
我没有得到我的问题的答案：为什么我不能渲染/显示 {countryname} ？？？为什么我必须将它保存到状态来渲染它？有没有办法在不保存到状态的情况下渲染它？返回 (

统计信息：{countryCode} {countryName} {countryname}

标签： reactjs state

【解决方案1】：

问题在于countryname（与countryName 分开）仅适用于您的函数getData。 JavaScript 中的变量的作用域仅限于定义它们的函数/块，具体取决于您声明它们的方式（var vs let/const）。在这种情况下，countryName 在您的组件中随处可用，而countryname 仅在getData 中可用。这是一种 JavaScript 主义，与您使用 React 无关。

【讨论】：

谢谢。我得到它。那么，在'RETURN（'之后使用countryname是否正确，它必须在state中设置？
我不太清楚你在这里的意思。在这种情况下，无法返回 countryname。您将它传递给setCountryName，这将具有在下一次渲染时为countryName 赋予与countryname 相同的值的效果。 useEffect 挂钩不会返回您的回调返回的任何内容，因此您无法将其恢复到相同的范围。即使你在useEffect 之外定义了countryname，在promise 解决之前它也没有值。这意味着当您尝试从 render 返回时，它将无法使用。
如果您的意思是您可以在返回后使用countryname，这在技术上也不是真的。在您当前返回您的元素（返回将呈现的元素）之后，这些变量都不再在范围内。 React 将异步（最终）将值 countryname 分配给可用于在下一次渲染时检索 counrtryName 的东西。变量countryname 永远不能在setData 之外使用，就像现在一样。
我也不认为有任何理由（或其中的任何价值）。只需去掉渲染中的{countryname}，就可以了。您将countryName 设置为与countryname 完全相同的值（通过将其传递给setCountryName）。所以没有理由在setData之外引用countryname

【解决方案2】：

首先，setState 不是变量，但我们需要const 来定义state。

例如：const [isLoading, setIsLoading] = useState(true);

isLoading 默认为true，可与setIsLoading 更改。

另一个例子是const foo = 'bar';

在这种情况下，foo 无法更改为其他值。

希望你能理解。

【讨论】：

感谢您的澄清。这就是我定义状态的方式，如上所示

统计信息：{countryCode} {countryName} {countryname}

统计信息：{countryCode} {countryName} {countryname}