React组件中myVariable提示未定义，请问问题原因是什么？

你遇到的是变量作用域问题：myVariable 是在 useEffect 的回调函数内部用 const 声明的局部变量，仅能在该回调函数内部访问，组件返回的JSX代码（外部作用域）无法读取到这个变量，因此会提示未定义。

有两种常见的处理方式，可根据你的需求选择：

方式一：使用 useState 管理变量（推荐） #

如果这个变量需要参与组件渲染、随值变化触发重渲染，用React状态来存储是标准方案：

import React, { useEffect, useState } from "react";

const Component = () => {
  const [myVariable, setMyVariable] = useState("");

  useEffect(() => {
    setMyVariable("Jim");
  }, []);

  return(<div>{myVariable}</div>) 
};

export default Component;

此时myVariable是组件级的状态变量，整个组件函数内部都能访问，且调用setMyVariable更新值时会自动触发组件重渲染，展示最新内容。

方式二：将变量声明移至组件函数顶层 #

如果变量不需要响应式更新（仅作为静态值，无需触发重渲染），可以把变量声明移到useEffect外部、组件函数的顶层作用域：

import React from "react";
import { useEffect } from "react";

const Component = () => {
  let myVariable = "";

  useEffect(() => {
    myVariable = "Jim";
    // 注意：这里修改变量不会触发组件重渲染，JSX大概率会显示初始空值
  }, []);

  return(<div>{myVariable}</div>) 
};

export default Component;

⚠️ 提示：这种方式下，useEffect内修改变量不会触发组件重渲染，因此返回的JSX可能始终显示初始值，仅在有其他触发重渲染的操作时才会更新显示，一般不推荐用于需要渲染展示的变量。

内容的提问来源于stack exchange，提问作者Newbie