Javascript 在这个reactjs逻辑中，一个变量没有更新组件的状态

我使用的是

recharts

，如果

data

变量不在类中，它就可以正常工作。所发生的事情是加载图形，设置图形动画，并显示“点”坐标。但是，如果

数据

变量位于类内，则它不会设置动画，也不会更新css中的“点”坐标

请注意render方法中注释掉的数据，如果我取消注释该数据，并注释掉top data变量，则它不起作用，但当前的设置工作正常。有什么解决办法吗？我最终想加载

this.props.data

而不是

data

，一旦这个问题解决了

const data = [{ name: '07/14/2017', mood: 6 }, { name: '07/15/2018', mood: 7 }];

class LinearGraph extends Component {

  constructor(props) {
    super(props);

  }

  render() {
    //const data = [{ name: '07/14/2017', mood: 6 }, { name: '07/15/2018', mood: 7 }];

    return (
      <ResponsiveContainer width="100%" height="80%">
        <LineChart
          data={data}
          margin={{ top: 5, right: 50, left: 0, bottom: 5 }}
        >
          <XAxis dataKey="name" />
          <YAxis />
          <CartesianGrid
            strokeDasharray="3 3"
            horizontal={false}
          />
          <Tooltip />
          <Legend />
          <Line
            type="monotone"
            dataKey="mood"
            stroke="rgba(43, 191, 217, 0.9)"
            dot={{ stroke: '#ff0000', strokeWidth: 12 }} // this isn't working at all
            activeDot={{ r: 1 }}
            strokeWidth={5}
          />
          <ReferenceLine y={7} label="Max" stroke="green" strokeDasharray="3 3" />
        </LineChart>
      </ResponsiveContainer>
    );
  }

}

const data=[{name:'07/14/2017'，mood:6}，{name:'07/15/2018'，mood:7}]；
类LinearGraph扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
//const data=[{name:'07/14/2017'，mood:6}，{name:'07/15/2018'，mood:7}]；
返回(
状态更改时调用
render
。您需要重新学习react。最佳做法是声明您的状态，然后将其加载到生命周期
componentDidMount
函数中

class LinearGraph extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            data = []
        };
    }

    componentDidMount() {
        // Get your data here, from a const or an API
        fetch('api/get_data')
            .then(res => res.json()) // Get the json
            .then(res => this.setState({data: res.data})) // Consume the json
            .catch(err => alert('foo'));
    }

    render() {
        return (
            <div>
                <LineChart data={this.state.data} />
            </div>
            );
    }
}

类LinearGraph扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据=[]
};
}
componentDidMount（）{
//从const或API获取您的数据
获取（'api/get_data'）
.then（res=>res.json（））//获取json
.then（res=>this.setState（{data:res.data}））//使用json
.catch（err=>alert（'foo'））；
}
render（）{
返回(
);
}
}
Woo，所以解决方案是调用
组件willreceiveprops
，所以我添加了：

componentWillReceiveProps（）{
this.setState（{data:this.props.data}）；
}

它现在更新得很好，不需要回调或承诺
您需要遵循React生命周期，它将在prop和state更改时重新加载。您可以将
数据
定义为组件的
状态
的属性吗？如果在构造函数中我设置了这个.state={data:this.props.data}，它是未定义的。现在，如果我将其设置为空数组，则无法执行此操作。setState（{data:this.props.data}）在render方法中，它抛出了大量错误，并且由于异步加载，不确定我还能在哪里设置它。我不能将它作为类中的函数，然后出于同样的原因在render中调用它。@Jordanbonitati还尝试将此.setState添加到componentWillMount和componentDidMount中。这很奇怪，因为这个.state.data是showing一个空数组，this.props.data在方法内的控制台日志中工作正常，因为它会异步更新。在构造函数中设置
initialState
似乎是正确的。如果库不喜欢空数组，可以将其作为一个数组和单个空对象启动，如
data:[{}]
？（无可否认，我们不知道库的内部工作原理，这有点像是瞎猜）我完全同意Jordan关于React lifecycle的看法。对于异步数据，您需要使用Kyle在其回答中所示的promise。当获取数据时，状态将被设置。很酷，在您发布之前，我实际上一直在处理这个问题。是否有可能让componentDidMount只使用这个.setState（{data:this.props.data}），因为抓取发生在父组件中，并且正在将数据传递给其他子组件？因为我尝试了，但它实际上不起作用，所以它会给我一个警告，并说“不要在组件中设置状态已装载”这比我评论的方法更有意义；我假设
数据
是静态的/hardcodedTry
componentWillMount
我尝试了componentWillMount和componentDidMount。我只是在底部用编辑更新了我的原始帖子。仍然不起作用：（Welp，nevermind。这适用于初始加载，但如果我在我的网站上更改页面并返回，同样的问题。我看到了图形线，但点不会更新为适当的css颜色。
class LinearGraph extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            data = []
        };
    }

    componentDidMount() {
        // Get your data here, from a const or an API
        fetch('api/get_data')
            .then(res => res.json()) // Get the json
            .then(res => this.setState({data: res.data})) // Consume the json
            .catch(err => alert('foo'));
    }

    render() {
        return (
            <div>
                <LineChart data={this.state.data} />
            </div>
            );
    }
}