使用 kriasoft/react-starter-kit创建一个网络应用程序。 它从我的 api 服务器获取对象,并将它们显示在页面上。 应用在获取数据时应显示加载图标。
我的代码在获取对象后没有重新渲染组件。 它继续显示“正在加载...”,即使我想看到“数据已加载!”。
import React from 'react';
import fetch from 'isomorphic-fetch'
class Search extends React.Component {
constructor(...args) {
super(...args);
this.getObjectsFromApiAsync = this.getObjectsFromApiAsync.bind(this);
this.state = {
isLoading: true,
};
}
async getObjectsFromApiAsync() {
try {
const response = await fetch('http://localhost:3030/api');
const content = await response.json();
// console.log(content)
this.setState({isLoading: false});
} catch(e) {
console.error(e);
}
}
componentWillMount() {
this.getObjectsFromApiAsync();
};
render() {
if (this.state.isLoading) {
return (
<p>Loading...</p>
);
}
return (
<p>Data loaded!!</p>
);
}
}
最佳答案
通过将 res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
添加到我的 api 服务器解决了这个问题。
问题不在 React 中。
关于javascript - 无法使用 react-starter-kit 重新渲染组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48224124/