属性"setState"在类型"窗口"上不存在

Question

我的index.tsx 中有这个简单的代码

let state = {};
window.setState = (changes: any) => {
state = Object.assign({}, state, changes);
ReactDOM.render(<App {...state} />, document.getElementById("root"));
};

但我得到的错误是

类型"Window"上不存在属性"setState"。

在我的依赖项中，我有以下

"dependencies": {
"@types/react": "^16.7.7",
"@types/react-dom": "^16.0.11",
}

我正在关注这个React Auth

Answer 1

对于那些说它应该是this.setState()的人，我认为它不应该。不幸的是，React Auth库给出的例子定义了一个奇怪且命名不当的(在React的上下文中)全局函数setState()。

这是链接中给出的JavaScript示例：

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
let state = {};
window.setState = changes => {
state = Object.assign({}, state, changes);
ReactDOM.render(<App {...state} />, document.getElementById("root"));
};
/* eslint no-restricted-globals: 0*/
let initialState = {
isLoggedIn: false,
signup: function () {
window.open(
"https://auth0.com/signup?utm_source=stackblitz&utm_medium=devsponsor&utm_campaign=stackblitz-react",
"_blank"
);
}
};
window.setState(initialState);

您只需要扩展window就可以让TypeScript满意：

declare global {
interface Window {
setState: (changes: any) => void;
}
}
let state = {};
window.setState = (changes: any) => {
state = Object.assign({}, state, changes);
};

尽管它看起来是一个糟糕的实现，除非我遗漏了什么。当其中一个属性发生变化时，您应该使用React的状态(和/或类似Redux的东西)，而不是重新渲染应用程序。

Answer 2

我认为它不应该是window.setstate，应该是this.setstate({})