Question

说我有以下JSON文件：

{
"farmer": [
{
"crops": "corn"
}
],
"activities":{
"hobbies": "swimming"
},
"name: Todd"
}

我想知道如何使用React调用它们。我最好的尝试如下所示。

componentDidMount: function(){
var selfish = this;
$.get('~~someurl~~', function(data){
selfish.setState(data);
});
},

render: function(){
return (<div>
<p>{this.state.name}</p>
<p>{this.state.activities.hobbies}</p>
<p>{this.state.farmer[0].crops}</p>
</div>)
}

我知道第一个{this.state.name}将在编写时运行。但是，我不确定如何使用React语法表达最后两个{this.state.activities.hobbies}和{this.state.farmer[0].crops}。

我已经把它们写出来，希望能够表达我每次通话时想要实现的目标。

编辑：后两者产生的具体错误表明它们未定义。

编辑：所以我通过添加一个空的初始状态让第二个工作。

getInitialState: function(){
return {activities: '', farmer: ''}
}

然而，这留下了最后一个，它仍然返回错误。

Answer 1

问题是您应该在使用componentWillMount时使用componentDidMount。查看the documentation这些生命周期方法。

这是文档中关于componentDidMount

的内容

立即仅在客户端（不在服务器上）调用一次初始渲染发生后。

这意味着当您第一次渲染状态时，除非您之前使用过getInitialState（另一种生命周期方法），否则不会声明您的状态。

我只是这样做了：

componentWillMount: function () {
    this.setState({
        "farmer": [
            {
            "crops": "corn"
            }
        ],
        "activities":{
            "hobbies": "swimming"
        },
        "name": "Todd"
    });
},

我能够在我的渲染方法中使用this.state.farmer[0].crops

编辑：

要清楚。如果在渲染组件后需要检索数据，则需要为渲染中使用的状态指定默认值。这可以使用getInitialState：

来实现

getInitialState: function () {
    return {
        "farmer": [
            {
                "crops": DEFAULT_VALUE
            }
        ],
        "activities":{
            "hobbies": DEFAULT_VALUE
        },
        "name": DEFAULT_VALUE
    });
},

使用React调用嵌套API？

1 个答案: