未在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)}抛出错误，因为数据没有定义

Requirement:

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

记住这一点，我试着在head标签中script标记中分配它，但是这显示了类型记录中的错误。

​

​

请帮助我如何分配一个全局变量并在任何文件中访问它。

Answer 1

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

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

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

created.

• Your函数是

1. initializeData函数是用那个回调函数和一个空数组调用的initializeData函数。

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

1. --您返回的React元素(及其子元素)将按React放入DOM。然后，
2. 将调用useEffect回调，这将创建创建全局变量的脚本元素.

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