Question

我有一个组件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>
        );
}
}

为什么会这样？怎么解决？

Answer 1

我在BarChart组件中拥有的是：

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

componentWillMount() { 
    this.setState({chartData: this.props.data});
}

render() {
        return (
            <div className="barChart">
                <Bar
                    data={this.state.chartData}
                />
            </div>
        );
}

我更改的是立即接收道具并使用它，而不是以状态或componentWillMount接收它：

export default class BarChart extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    }

    componentWillMount() { }

    componentDidMount() { }

    render() {
        return (
            <div className="barChart">
                <Bar
                    data={this.props.data}
                />
            </div>
        )
    }
}

因此，每当更改道具时，组件都会重新渲染。

传递对象作为道具并接收它

1 个答案: