Question

我正在开发一个应用程序，在该应用程序中，我使用流中的数据更新接口。我开始使用类似这样的代码：

tempDisplay.setState()

我现在应该做的是在新数据进入时调用tempDisplay更新这些温度显示，但<div>似乎是setState()对象{{1}无法调用。我该怎么做呢？

Answer 1

该组件管理自己的状态。温度变化是否来自数据库？然后，您可能需要在组件的方法中使用ajax调用轮询它。

这可能看起来像（伪代码）：

var TempDisplay = React.createClass({
    getInitialState: function() {
        return {
            tempFAA:0.69,
            tempGGG:1.4,
            temp03K:3.66,
            temp60K:58.79,
            rateFAA:-0.04,
            rateGGG:-0.0001,
            rate03K:0.45,
            rate60K:1.3,
        }
    },
    pollTemperature: function(){
       $setInterval(function(){ 
       $ajax( ... call to API route ... )
       .then(function(){
            this.setState(temps: newTemps )
       })
       }
    }
    render: function() {
        return(
            <div>
                <Temp label="60K" color="#d62728" temp={this.state.temp60K} rate={this.state.rate60K} />
                <Temp label="03K" color="#2ca02c" temp={this.state.temp03K} rate={this.state.rate03K} />
                <Temp label="GGG" color="#ff7f0e" temp={this.state.tempGGG} rate={this.state.rateGGG} />
                <Temp label="FAA" color="#1f77b4" temp={this.state.tempFAA} rate={this.state.rateFAA} />
            </div>
        )
    }
});

Answer 2

您需要的是像Redux这样的状态容器：https://github.com/reactjs/redux

您将管理商店中的所有状态，而不是让每个组件都管理自己的状态。组件将连接到存储并在更改时进行更新。商店将根据某些可能是AJAX响应的操作进行更改，从流或用户操作接收更多数据。

或者，您可以管理组件中组件树的状态，该组件是依赖于相同状态信息的所有其他组件的父组件。然后将相关部分作为道具传递下来。

无法从React外部的ReactJS组件上设置State

2 个答案: