React 打字稿中未定义的变量

Question

我正在制作一个简单的 React 应用程序，其中有一个 app.tsx 文件，代码如下，

export default function App() {
  const initializeData = () => {
    const dataScript = document.createElement("script");
    dataScript.type = "text/javascript";
    dataScript.textContent = `
    let data = { 'name': "" };`;
    document.head.appendChild(dataScript);
  };

  React.useEffect(() => {
    initializeData();
  }, []);

  return (
    <div className="App">
      {console.log(data)}
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

-> 其中 initializeData 方法将初始化全局数据，并且可用于所有其他页面（考虑到所有组件都将在 app.tsx 中调用） .

->从useEffect生命周期钩子中调用方法，如，

  React.useEffect(() => {
    initializeData();
  }, []);

-> 尝试console.log 模板中的数据之类的，

 return (
    <div className="App">
      {console.log(data)}
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );

错误：

这一行 {console.log(data)} 抛出错误，因为数据未定义

要求：

需要在全局级别进行变量声明，以便这些变量可用于所有文件。

请记住这一点，我尝试将其分配到 head 标签内的 script 标签中，但这在打字稿中显示错误。

请帮助我了解如何分配全局变量并在任何文件中访问它..

Answer 1

您的useEffect 回调直到在您尝试在您返回的JSX 中使用data 变量后才会运行。来自useEffect documentation：

传递给useEffect 的函数将在渲染提交到屏幕后运行。

第一次调用App 函数时发生的事情的顺序是：

1. initializeData 函数已创建。
2. 您的useEffect 回调函数已创建。
3. 使用该回调和一个空数组调用 useEffect。
4. 评估您的 JSX，包括 console.log(data) 调用 - 导致错误。

如果不是因为错误，事情会这样继续：

5. 您返回的 React 元素（及其子元素）将由 React 放入 DOM。
6. 然后React 会调用你的useEffect 回调，它会创建脚本元素来创建全局变量。

您可以使用typeof data === "undefined" 知道这是第一次渲染，而data 可能还不存在，但您还需要做一些其他事情来让您的组件函数再次被调用（例如，在 useEffect 回调中更新一个状态变量）。但是，委婉地说，在组件挂载时创建全局变量并不是最佳实践，我强烈建议您以不同的方式解决您的基本需求。