时间戳

首页 > 解决方案 > React 中的条件渲染（以 Chart.js 为特色）

javascript - React 中的条件渲染（以 Chart.js 为特色）

问题描述

我目前正在做一个项目，它有很多功能，其中之一是显示一个图表，其中包含受控输入提供的数据。当应用程序渲染时，没有信息并且图表没有显示，所以我决定在没有显示数据的情况下显示一个名为 ChartCover 的组件，并使用条件渲染，如果输入正确填写，我会向用户显示图表. 但是我在这部分有问题。条件渲染正在工作，但我必须单击我的提交按钮两次（第一次单击它用我的 BillsChart 组件替换 ChartCover，但我必须再单击一次才能显示数据）。抱歉，如果这有点令人困惑，但是，无论如何，我将在下面显示代码片段。

（还有一件事，hasTypedIn 在 state 中被初始化为 false，而在 handleSubmit 方法中我只是将其更改为 false）

handleSubmit 方法也处理一些其他的东西，但它们不影响条件渲染

```
   handleSubmit(e) {
const { groceries, shopping, health, houseNeeds } = this.state;

const gSum = parseInt(groceries, 10);
const sSum = parseInt(shopping, 10);
const hSum = parseInt(health, 10);
const hnSum = parseInt(houseNeeds, 10);

this.setState({
  total: gSum + sSum + hSum + hnSum,
  chartData: [gSum, sSum, hSum, hnSum],
  hasTypedIn: true
 });
  e.preventDefault();
 }
```


```
  {this.state.hasTypedIn ? (
        <BillsChart spendings={this.state.chartData} />
      ) : (
        <ChartCover />
      )}

```

标签： javascriptreactjs

解决方案

看起来您的 BillsChart 组件有问题，也许您在处理 BillsChart 更新时的 chartData。

推荐阅读