我的状态未从通话更改为call1

Question

我想设置为DynamicBarChart，但无法更新状态。您能找出原因吗？

import React, { Component } from 'react';
import { DynamicBarChart } from 'react-dynamic-charts';
import 'react-dynamic-charts/dist/index.css';

class Dynamicchart extends Component {
  constructor(props) {
    super(props)

    this.state = {
      data: [{ "name": "Call", "values": [] }]
    }
  }

  componentDidMount = async () => {
    const mockData = [
      {
        id: 1,
        value: 10,
        label: "hey",
        color: "red"
      }
    ]
    const newwData = [{
      "name": "Call1",
      "values": mockData // Here i changed the values of the data
    }]

    this.setState({
      data: newwData // This method is unable to change the state.data component
    });

    // This still gives the value of data which is given in constructor 
    // Why has the value not changed?
    console.log(this.state.data) 
  }

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

export default Dynamicchart

此代码在前端显示“ Call”，我想要“ Call1”的值。这意味着状态没有改变。您能解释为什么会这样吗？

Answer 1

向key组件添加随机DynamicBarChart将解决问题：

    return <DynamicBarChart key={Math.random()} data={this.state.data} />;

我创建了一个沙箱以在此Example with Simulated API Request中假冒延迟地演示这一点。

---

也就是说，关于@Waheed的注释是有效的，关于在调用this.state.data之后立即访问this.setState({...})，因为后者是异步的。如果要查看数据更新，请在console.log块中使用render()或将其用作setState的回调，例如在其回复中提到的@Waheed。

之所以不重新渲染组件，是因为您要用新数据来改变状态。通过设置随机键，您将强制重新渲染DynamicBarChart组件。

Answer 2

[setState是Async操作，因此您必须使用callback在setState之后执行任何操作，以这种方式在回调中使用console.log()或将console.log放在呈现函数中。

    const newwData = [{
      "name": "Call1",
      "values": mockData
    }]

    this.setState({
      data: newwData
    }, () => console.log(this.state.data));