我有一个使用fetch API获取用户数据的对象数组。我试过构造函数,创建一个函数,绑定它。它没用。我尝试了ComponentDidMount和setState,它返回undefined。
class Admin extends Component {
componentDidMount () {
var that = this;
fetch('http://localhost:4500/data/users', {
method: 'GET',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
}
}).then(function(response) {
return response.json();
}).then(function(json){
console.log(json);
that.state = {users: json};
});
}
render() {
return (
<SpicyDatatable
tableKey={key}
columns={columns}
rows={this.state.users}
config={customOptions}
/>
);
}
}
将状态值设置为数组并呈现它的正确方法是什么?感谢
答案 0 :(得分:2)
首先在你的构造函数中初始化你的状态
constructor(props) {
super(props);
this.state = {users : []} //initialize as array
}
然后使用
代替that.state = {users: json};
设置您的状态
that.setState({ users: json });
答案 1 :(得分:1)
您应该使用React setState()
方法。
that.setState({ users: json });
答案 2 :(得分:0)
您已经得到了使用setState({ users: json })
的答案,这是正确的。
作为初始化数组值的替代方法,如abul所述,您还可以执行条件渲染,具体取决于组件状态。即,如果用户尚未加载,您可以呈现不同的组件。
render() {
const users = this.state.users;
return !users ?
<p>Loading..</p> :
<YourComponent users={users} />;
}