Question

我尝试将数据从父组件传递给带有props的子组件。我试图更新this.State，在构造函数之外，我得到错误，这是一个保留字，然后const是一个保留字这是下面的代码：

import React, {Component} from 'react';
import {Doughnut} from 'react-chartjs-2';

class DoughnutChart extends Component {
    constructor(props) {
      super(props);
      this.state = {
        const { a } = this.props.percent_value;
        const { b } = (100 - this.props.percent_value);
        const { c }

      doughData: {
             type: 'doughnut',
           labels: ['Success'],
           data: {
          datasets: [
            {
              label: {c},
              data: [value1, value2],
              backgroundColor: ['#2698A1', '#F0F5F7']
            }
          ]
        }    
      };
    }
   render() {
        return (
          <div className="doughchart">
          <DoughnutChart
            data={{
              datasets: [
                {
                  label: [c],
                  data: [value1, value2],
                  backgroundColor: ['#2698A1', '#F0F5F7']
                }
              ]}}
            width={140}
            height={140}
            options={{
              cutoutPercentage: 80
            }}
          />
        </div>
      );
    }
  }
  export default DoughChart;

另外我尝试声明为const this.props以便绕过保留字问题然后我得到错误 C＆＃39;没有定义no-undef 第15行：＆＃39; value1＆＃39;没有定义no-undef 第15行：＆＃39; value2＆＃39;没有定义no-undef 第36行：＆＃39; value1＆＃39;没有定义no-undef 第36行：＆＃39; value2＆＃39;没有定义no-undef 第51行：＆＃39; DoughChart＆＃39;未定义

基于以下代码：

import React, {Component} from 'react';
import {Doughnut} from 'react-chartjs-2';

class DoughnutChart extends Component {
  constructor(props) {
    super(props);
    this.state = {
      doughData: {
        type: 'doughnut',
        labels: ['Success'],
        data: {
          datasets: [
            {
              label: {c},
              data: [value1, value2],
              backgroundColor: ['#2698A1', '#F0F5F7']
            }
          ]
        }
      }
    };
  }

  render() {
    const {a} = this.props.percent_value;
    const {b} = 100 - this.props.percent_value;
    const {c} = this.props.label;

    return (
      <div className="doughchart">
        <DoughnutChart
          data={this.State.doughData}
          width={140}
          height={140}
          options={{
            cutoutPercentage: 80
          }}
        />
      </div>
    );
  }
}
export default DoughChart;

如何通过this.State？

正确地将数组的props值传输到组件中

Answer 1

您正尝试使用无效语法设置this.state。这是一个Javascript对象，因此您必须使用键值表示法来添加属性

this.state = {
    a: this.props.percent_value,
    b: 100 - this.props.percent_value
}

这个，const是一个保留字reactjs

1 个答案: