これはconstの予約語です。reactjs

Question

親コンポーネントのデータを小道具付きの子に渡そうとしています。私は、コンストラクタの外に、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 'は定義されていないno-undef 行15：' value1 'は定義されていませんno-undef 行15：' value2 'は定義されていませんno-undef ライン36「値1」は、undefを ライン36を定義されていないされない：「値2」に定義されていない無undefを ライン51「DoughChart」が定義されていない

次のコードに基づいて0

：

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を通じてコン​​ポーネントに正しく転送することができますか？

Answer 1

無効な構文でthis.stateを設定しようとしています。これはJavaScriptオブジェクトであるので、あなたは、プロパティ

を追加するために、キーと値の表記を使用する必要が

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