Передача объекта в качестве реквизита и получение его

Shatha спросил: 03 ноября 2018 в 08:40 в: reactjs

У меня есть компонент Data и его дочерний компонент BarChart.

Data выглядит следующим образом:

export default class Data extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: {
        labels: [],
        datasets: [{
          label: "",
          data: [],
          backgroundColor: ''
        }]
      }
    }
  }  componentWillMount() {
    this.geData();
  }  geData = () => {
    let labelsData = someContent;
    let datasets = otherContentl;
    this.setState({data: {...this.state.data, labels: labelsData, datasets: datasets}}, ()=>{console.log(this.state.data)});
  }  render(){
    return (
      <BarChart data={this.state.data} />
    );
  }
}

Когда я проверяю результат console.log(this.state.data) в функции getData, он выводит правильные данные. Однако когда я получаю реквизиты в BarChart, я получаю только ключ datasets, заполненный правильными данными, но ключ labels является пустым массивом.

export default class BarChart extends Component {
    constructor(props) {    
        super(props);
        console.log(props);
    }componentWillMount() { 
    this.setState({chartData: this.props.data});
}render() {
        return (
            <div className="barChart">
                <Bar
                    data={this.state.chartData}
                />
            </div>
        );
}
}

Почему это происходит? Как это можно исправить?

0 ответов