使用chart.js时在react.js中使用props传递值的问题

Question

I am using react js and trying to send Props from my app.js to chart.js file. When I send the hardcoded values the values are being send properly and graph is made according to it. But whenever I am passing a dynamic values, values are being passed but not used by chart.

App.js

 class App extends React.Component {

  state = {
    text: "",
    credit: [{_id:1,financeCredit:"loading"}],
    debit: [{_id:1,financeDebit:"loading"}],
   }

componentDidMount(){
    fetch('/data')
    .then(res=> res.json())
    .then(res2 => {
      console.log(res2)
      this.setState({
        credit: res2
      })
    })

    fetch('/data2')
    .then(res=> res.json())
    .then(res2 => {
      console.log(res2)
      this.setState({
        debit: res2
      })
    })

}

  render(){

var lengthExpense = this.state.credit.length;
console.log(lengthExpense)

var expName = [];

for (var a = 0 ; a <= lengthExpense ; a++){

if (this.state.credit[a]){
    expName.push(this.state.credit[a].expenseName)
}

}

var expAmount = [];

for (var b = 0 ; b <= lengthExpense ; b++){
    if(this.state.credit[b])
    expAmount.push(this.state.credit[b].expenseAmount)
}

console.log(expAmount)
console.log(expName)


    return (
      <BrowserRouter>
      <div className="App">   
      <Navbar />
      <Chart  expam = {expAmount} expnam = {expName} />
      <Route exact path = "/" component = {Home} />
      </div>
      </BrowserRouter>
  );
}

}

export default App;

Although the following console.log() is showing the desired values I want to pass

console.log(expAmount)
console.log(expName)

I am passing these values like this

<Chart  expam = {expAmount} expnam = {expName} />

In chart.js although I am getting these values.

Chart.js

class Chart extends Component{

    constructor(props){
        super(props);
        this.state = {
            chartData : {
                labels: this.props.expnam,
                datasets: [{
                    label: 'Expense',
                    data: this.props.expam,
                    backgroundColor:'rgba(255, 99, 132, 0.6)'
                }]
            }
        }
    }

    render(){

console.log(this.props)

        return(
            <div className = "chart">
                <div>
            <Bar id = "chart1"
            data={this.state.chartData}
            options={{ maintainAspectRatio: false, }}
            />  

            <canvas id = "chart1" height="30vw" width="10vw" ></canvas>
                </div>

            </div>
        )
    }
}

But couldn't able to pass it to to labels and data. Code is properly running but there is no values so chart is being showed empty

constructor(props){
        super(props);
        this.state = {
            chartData : {
                labels: this.props.expnam,
                datasets: [{
                    label: 'Expense',
                    data: this.props.expam,
                    backgroundColor:'rgba(255, 99, 132, 0.6)'
                }]
            }
        }
    }

In this chart.js file I can see all the values that are being passed from App.js. But these values are not been used for chart (bar chart).

console.log(this.props)

Answer 1

It seems like you're setting the data in your constructor:

constructor(props){
    super(props);
    this.state = {
        chartData : {...}
    }
}

A constructor is only called once when an object is initialized. (In ReactJS, it is only called after the first render.)

You are calling setState() , and the rest appears to be good, that I can tell. Why don't you move this.state = {...} from the constructor to render() ? Since render() runs whenever the state is changed, your setState() calls should work.

It may be inelegant, and there can certainly be improvements, but it will get you started in the right direction.