Question

我开始学习反应本机并构建一个Android应用程序。所以我在设置和获取组件的属性方面遇到了一些问题。这是我的代码

我有两个名为content-container和bar-chart的组件。在content-container里面，这是我的代码块：

state = {
         barChartResponse: {},
         arcChartResponse: {},
         stackChartResponse: {},
         lineChartResponse: {},
         token:'abc',
        };


    componentWillMount() {
       this.setState({token:'xyz'});
}


render() {
   return (
    <ScrollView>
       <BarChart chartData = {this.state.token} />
    </ScrollView>
  );
}

现在我试图在条形图组件中获取此属性，如下所示：

constructor(props) {
        super(props);
        Alert.alert("ChartData is : ",props.chartData);

  }

它显示了我在状态对象中默认设置的值，即abc，但我想要更新的值。请帮我弄清楚我做错了什么.......提前谢谢。

Answer 1

您需要更新它将自动反映在子组件中的父组件的状态，但下次您将在componentWillRecieveProps（nextProps）中收到，然后呈现方法。

例如：

state = {
         barChartResponse: {},
         arcChartResponse: {},
         stackChartResponse: {},
         lineChartResponse: {},
         token:'abc',
        };


    componentWillMount() {
       this.setState({token:'xyz'});
}

updateState = () => {
   this.setState({token: "newToken"})
}
render() {
   return (
    <ScrollView>
       <Button onPress={this.updateState}>update State</Button>
       <BarChart chartData = {this.state.token} />
    </ScrollView>
  );
}

在BarChart.js

componentWillRecieveProps(nextProps) {
   // you can compare props here
   if(this.props.chartData !== nextProps.chartData) {
      alert(nextProps.chartData)
   }
}

Answer 2

您可以使用componentWillRecieveProps但不推荐使用它，在RN＆gt; 54中，您可以使用componentDidUpdate或getDerivedStateFromProps从父级获取状态，如下所示：

componentDidUpdate(nextProps){
      if (this.props.chartData !== nextProps.chartData) {
           alert(nextProps.chartData)
      }
}

或

static getDerivedStateFromProps(props, current_state) {
    if (current_state.chartData !== props.chartData) {
      return {
        chartData: props.chartData,
      }
    }
}

如何将状态变量设置为反应原生的组件属性？

2 个答案: