Javascript 无法从React外部设置ReactJS组件的状态

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

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,
        }
    },
    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>
        )
    }
});

var Instrument = React.createClass({
    render: function() {
        return(
            <div><span style={{color:this.props.color}}>{'\u25C9 '}</span>{this.props.label}</div>
        )
    }
});

var tempDisplay = ReactDOM.render(<TempDisplay />, document.getElementById("tempDisplay"));

var TempDisplay=React.createClass({
getInitialState:函数（）{
返回{
tempFAA:0.69，
tempGGG:1.4，
temp03K:3.66，
temp60K:58.79，
费率FAA：-0.04，
费率GGG：-0.0001，
比率03K:0.45，
税率60K:1.3，
}
},
render:function（）{
返回(
)
}
});
var Instrument=React.createClass({
render:function（）{
返回(
{'\u25C9'}{this.props.label}
)
}
});
var tempDisplay=ReactDOM.render（，document.getElementById（“tempDisplay”）；

---

我现在应该做的似乎是调用

tempDisplay.setState（）

，每当新数据进入时更新这些温度显示，但是

tempDisplay

似乎是一个

对象，无法调用

setState（）

。我应该如何正确地执行此操作？

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

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

var TempDisplay=React.createClass({
getInitialState:函数（）{
返回{
tempFAA:0.69，
tempGGG:1.4，
temp03K:3.66，
temp60K:58.79，
费率FAA：-0.04，
费率GGG：-0.0001，
比率03K:0.45，
税率60K:1.3，
}
},
pollTemperature:函数（）{
$setInterval（函数（）{
$ajax（…调用API路由…）
.然后（函数（）{
this.setState（临时：新临时）
})
}
}
render:function（）{
返回(
)
}
});

您需要的是像Redux这样的状态容器：

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

---

---

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

您所说的“当新数据进来时”是什么意思状态中的数据改变的唯一方式是用新值替换它…你期望它从何而来反应很好，但它不是神奇的，因为最好不要使用

tempDisplay

组件的

setState

，而是使用道具将数据传递给它？如果数据在外部更新，你不需要使用component状态来存储它。正如我上面所说，数据是在流中输入的。因此，不，不是其他React组件。我计划设置一个流。每隔一段时间，就会出现一个数据块，它有一大堆不同的状态，这些状态一起需要更新许多模块中的数据，如我上面所示。我需要一种方法来

setState（）

当数据输入时，在多个组件中。

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>
        )
    }
});