javascript - Reactjs更新componentDidMount？

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