Reactjs 将状态参数传递给函数

在React类中，我调用的函数需要一个参数：

renderColumnChart(chart) {
  console.log('rendering chart');  
  console.log(typeof chart);  // <<<<<<<< OK! I get "Object"
  console.log(chart);  // <<<<<<<<<<<<<<< OK! I get the object in the console
  console.log(chart.title);  // <<<<<<<<< NO! I get the error :(
  return (
    <React.Fragment>
      <br />
      <Chart
        width={'100%'}
        height={'400px'}
        chartType="Bar"
        loader={<div>Loading Chart...</div>}
        data={[
          ['City', '2010 Population', '2000 Population'],
          ['New York City, NY', 8175000, 8008000],
          ['Los Angeles, CA', 3792000, 3694000],
          ['Chicago, IL', 2695000, 2896000],
          ['Houston, TX', 2099000, 1953000],
          ['Philadelphia, PA', 1526000, 1517000],
        ]}
        options={{
          chart: {
            title: 'Chart Title',
            subtitle: 'Hello World',
          },
          legend: { position: 'none' },
          chartArea: { width: '50%' },
          hAxis: {
            title: 'Total Population',
            minValue: 0,
          },
          vAxis: {
            title: 'City',
          },
        }}
      />
    </React.Fragment>
  );
}

在API调用后，已将

isLoading

设置为false：

componentDidMount() {
  this.getData();
  this.setState({
    isLoading: false,
  });
}

但我得到了一个错误：

未捕获类型错误：无法读取未定义的属性“title”

---

这是令人困惑的，因为：为什么我可以记录对象，但不能记录它的任何值？

添加

isLoading:false，

在

getData

内部

从API调用中得到响应后，将其从
componentDidMount

componentDidMount() {
  this.getData();
  //this.setState({
  //  isLoading: false,
  //});
}

重要的是要知道，开发者工具中的Chrome控制台显示对象的“实时”（即扩展时的当前）视图

试试下面的实验。将以下代码复制并粘贴到Chrome控制台中：

constobj={}；
控制台日志（obj）；
obj.foo='bar'；
setTimeout（（）=>obj.bar='baz'）；

最初，它将显示为
▶ {}
，但如果展开它，它将显示它有两个属性，
foo
和
bar
，这两个属性都是在记录对象之后添加的

在记录对象时，唯一可靠的方法是创建对象的（深层）副本。一种方法是使用
JSON.parse（JSON.stringify（obj））
，假设整个对象可序列化为JSON

关于您的问题，如果您的代码与您的问题中的代码完全相同，则有一种可能性，即您在
render（）
函数中对
this.state.isloading
的引用中有一个输入错误，而它应该是
this.state.isloading

但我怀疑这不是真正的问题。我怀疑发生的事情是在初始渲染期间，
this.state.reports[0]
的值是
未定义的
，如果您正在初始化
this.state={reports:[]，…etc.}
。然后，在异步完成
getData（）
之后，您将更新状态，因此
this.state.reports=[{title:'Foo'，…etc..}]
，有效地。当React再次调用
render（）
时，它可以看到完整的对象

最后，正如其他人所说，因为
getData（）
是异步的，所以在设置
报告
状态时或之后，需要将
this.setState（{isLoading:false}）
移动到
getData（）
函数中。或者，如果可以使用
async/await
构造，则将
getData（）
async，然后
componentDidMount（）
变为：

异步组件didmount（）{
等待此消息。getData（）；
this.setState（{isLoading:false}）；
}

是

getData（）

async？

getData

是异步的，

setState

也是异步的。因此，它不会等到

getData

完成后，才将

isLoading

设置为false。这意味着它将在从API返回数据之前呈现图表。这就是为什么会出现未定义的错误。至于为什么要定义对象，我认为这只是浏览器控制台的一个怪癖。即使您得到了该错误，在后台API调用仍然会发生并更新状态。在控制台中，这意味着以前打印的值得到更新。另外，您有一个输入错误，

this.state.isloading

，但是在

setState

调用中，您使用了驼峰式大小写：

isloading

。最简单的修复方法是在API调用返回并在中设置了报告数据后设置状态state@Jayce444你找到了！！非常感谢。。。这真让人泄气！对不起，我的代码没有注释。我将更新上面的代码@Dave Newton这是一个异步函数。我尝试了你的建议，但仍然不起作用。有趣的是，即使我将

isLoading

状态设置为false，但从未将其设置为true，我也看不到浏览器中的“Loading…”。令人费解。

componentDidMount() {
  this.getData();
  //this.setState({
  //  isLoading: false,
  //});
}