Question

我使用componentDidMount进行API调用。代码在页面呈现时将结果传递给我。但是，我似乎无法更新其值并将其传递给ComponentDidMount。我的代码如下。

getInitialState: function(){
return {main: '', place: 'London, UK', weather: [{icon: ''}] }
},

componentDidMount: function(){
var comp = this;
$.get("http://api.openweathermap.org/data/2.5/weather?q="+comp.state.place+"&appid=abunchofnumbers", function(data){
comp.setState(data);
}); 
},

setit: function(){
this.setState({place: document.getElementById('stuff').value});
console.log(this.state.place);
},

render: function(){
return (<div>
<p>{this.state.name}</p>
<p>{this.state.main.temp}</p>
<p>{this.state.weather[0].icon}</p>
<input type="text" id="stuff" />
<input type="submit" value="submeet" onClick={this.setit}/>
</div>);
}

此外，它需要两次点击console.log place中的最新条目。单击它只返回一次之前的值。

编辑：此后对代码进行了以下调整，并按预期工作。但是，当重新渲染数据时，它会产生奇怪的闪烁效果。

callthebase: function(){
var comp = this;
$.get("http://api.openweathermap.org/data/2.5/weather?q="+comp.state.place+"&appid=1333982caee02b04d765f15ec51bf10d", function(data){
comp.setState(data);
}); 
},

componentDidMount: function(){
return this.callthebase();
},

componentDidUpdate:function(){
return this.callthebase();
},

setit: function(){
this.setState({place: document.getElementById('stuff').value});
},

render: function(){
return (<div>
<p>{this.state.name}</p>
<p>{this.state.main.temp}</p>
<p>{this.state.weather[0].icon}</p>
<input type="text" id="stuff" />
<input type="submit" value="submeet" onClick={this.setit}/>
</div>);
}

Answer 1

如果要响应状态更改，则应定义componentDidUpdate方法并检查place是否更改。如果是，请提出新请求。

我建议您将GET请求代码移出componentDidMount并转移到新功能中。然后在componentDidMount和componentDidUpdate中调用该函数。

此外，您不需要在组件中使用getElementById。相反，您应该将onChange和value道具传递给您的输入，并将输入的值存储在组件的状态中。

请参阅：https://facebook.github.io/react/docs/component-specs.html#updating-componentdidupdate

Reactjs更新componentDidMount？

1 个答案: