使用API​​设置状态不起作用; state是一个空对象

时间:2016-03-07 23:19:29

标签: javascript reactjs

这是有问题的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()重新呈现视图,但显然不是这种情况。

0 个答案:

没有答案