Проблема в передаче значений с помощью реквизита в реакции. js при использовании диаграммы. js

Question

Я использую реагирование js и пытаюсь отправить реквизиты из моего приложения. js в диаграмму. js файл. Когда я отправляю жестко закодированные значения, значения отправляются правильно, и график составляется в соответствии с ним. Но всякий раз, когда я передаю динамические значения c, значения передаются, но не используются диаграммой.

Приложение. 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;

Хотя следующий console.log () показывает желаемые значения, которые я хочу передать

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

Я передаю эти значения следующим образом

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

В диаграмме. js, хотя я получаю эти значения.

Диаграмма. 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>
        )
    }
}

Но не удалось передать его меткам и данным. Код работает правильно, но значений нет, поэтому диаграмма отображается пустой

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)'
                }]
            }
        }
    }

В этом файле диаграммы. js Я вижу все значения, передаваемые из приложения. js. Но эти значения не были использованы для диаграммы (гистограммы).

console.log(this.props)

Answer 1

Кажется, вы устанавливаете данные в конструкторе:

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

Конструктор вызывается только один раз , когда объект инициализируется. (В ReactJS он вызывается только после первого рендера.)

Вы звоните setState(), а остальное кажется хорошим, что я могу сказать. Почему бы вам не переместить this.state = {...} из конструктора в render()? Поскольку render() выполняется всякий раз, когда изменяется состояние, ваши setState() вызовы должны работать.

Это может быть не элегантно, и, безусловно, могут быть улучшения, но это поможет вам начать работу в правильном направлении.