这是有问题的React组件。
import React from 'react';
class JSONTest extends React.Component {
constructor(props) {
super(props);
this.state = {
title: '',
description: '',
lang: ''
}
}
componentDidMount() {
this.serverRequest = $.ajax({
url: "/jinra/api/public/test",
success: (data) => {
this.setState({
title: data.title,
description: data.description,
lang: data.lang
});
}
})
}
componentWillUnmount() {
this.serverRequest.abort();
}
render() {
return (
<div>
<h1>Title: {this.state.title}</h1>
<p>Description: {this.state.description}</p>
<p>Language(s): {this.state.lang}</p>
</div>
)
}
};
module.exports = JSONTest;
但是,当我进入React Developer Tools并查看组件的状态时,它表示它是一个空对象,即使我明确地将构造函数中的状态设置为具有空字符串。我测试过我的API调用,效果很好。这是我访问API时的JSON输出:
{"title":"Title","description":"This is a description.","lang":"Python"}
我做错了什么?我假设this.setState()重新呈现视图,但显然不是这种情况。