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

【问题标题】：Unable to setState on ReactJS component from outside React无法从 React 外部设置 ReactJS 组件的状态
【发布时间】：2016-09-09 00:37:15
【问题描述】：

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

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

我现在应该做的是调用tempDisplay.setState() 以在有新数据时更新这些温度显示，但tempDisplay 似乎是一个<div> 对象，无法调用setState()。我应该如何正确地做到这一点？

【问题讨论】：

你所说的“当新数据进来时”是什么意思，你的状态中的数据会改变的唯一方法是如果你用新的值替换它......你期望这会发生在哪里from react 很棒，但不是魔法
也许最好不要setState 的tempDisplay 组件，而是使用道具将数据传递给它？如果数据在外部更新，则不需要使用组件状态来存储。
就像我上面说的，数据以流的形式传入。所以不，不是其他 React 组件。

标签： javascript reactjs jsx

【解决方案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>
        )
    }
});

【讨论】：

我打算设置一个流。每隔一段时间，就会出现一个数据块，它有一大堆不同的状态，它们需要一起更新许多模块中的数据，就像我上面展示的那样。当这些数据进来时，我需要一种在多个组件中setState() 的方法。

【解决方案2】：

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

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

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

【讨论】：