未捕获(承诺)类型错误:this.setState 不是一个函数

Question

在我的父组件中，我正在从 json 文件加载数据并使用它来设置状态。然后使用 react-router，我将状态传递给一个子组件，该子组件在路由中呈现数据。此行为按预期工作。但是，当我尝试刷新路由时，父组件的状态(以及子组件的 props(丢失，并且页面抛出未定义的错误。

我尝试在子组件的ComponentDidMount生命周期方法中从父组件调用数据加载函数，但应用程序Uncaught (in promise) TypeError: this.setState is not a function抛出错误。

父组件代码：

async loadWorldData() {
await axios.get("../factbook.json")
.then(res => {
let Data = res && res.data.countries;
Data = Object.values(Data).map(country => country.data) || [];
let newData = this.removeNull(Object.values(Data));
this.setState({ worldData: newData})
});
}

子组件代码：

componentWillMount = () => {
this.props.loadWorldData();
}

我不知道另一种方法可以在不调用子项生命周期方法中的父函数的情况下重新加载应用程序状态。

Answer 1

试试这个：这可能是一个绑定问题。

loadWorldData = async() => {
const res = await axios.get("../factbook.json")
let data = res && res.data.countries;
data = Object.values(Data).map(country => country.data) || [];
let newData = this.removeNull(Object.values(Data));
this.setState({ worldData: newData });
}

为什么这不起作用？

要使用 setState，您必须有权访问this。正常函数不受this约束。有两个选项可以解决此问题：

首先：在构造函数中将函数绑定到此函数。

class App extends React.Component {
constructor(props) {
super(props);
this.loadWorldData = this.loadWorldData.bind(this);
}
}

第二：胖箭头功能：

由于 Fat 箭头函数绑定到this，您不必担心将它们绑定到constructor中，如第一个示例所示。

Answer 2

async loadWorldData() {
const self = this;
await axios.get("../factbook.json")
.then(res => {
let Data = res && res.data.countries;
Data = Object.values(Data).map(country => country.data) || 
[];
let newData = this.removeNull(Object.values(Data));
self.setState({ worldData: newData})
});
}

您可以删除异步等待您不需要它们。