無法將道具從父組件傳遞到子組件

Question

我的App.js中有導航屏幕，其中一個屏幕呈現自定義標頭，如下所示：

const DailyStack = createStackNavigator({
  Dashboard,
  SalesDashboard: {
    screen : SalesDashboard,
    navigationOptions:{
      header: null,
    }
  },
  StackNavSecond : {
    screen: StackNavSecond, 
      navigationOptions : {
        header : <CustomHeader />,

      }
  },....

然后在我的CustomHeader.js文件中，我有一些狀態數據：

class CustomHeader extends Component {

  constructor(props) {
    super(props)

    this.state = {
      title:'Regions',
      subtitle:'',
      oem: ''
    }
  }

 async componentDidMount(){

   let car_brand = await AsyncStorage.getItem('brand_name');
   let main_oem = await AsyncStorage.getItem('oem_name');

   await this.setState({
             oem: main_oem,
             subtitle: car_brand,
   });

   console.log(this.state.oem)
  }



render() {
    console.log(this.state.title)
   const {title, subtitle, oem} = this.state;
    return (
             <View>  
               <CustomDropdown title={title} subtitle={subtitle} oem={oem} /> 
             </View>
          )
     }
}

export default withNavigation(CustomHeader);

道具title未傳遞到其子組件，該子組件將在另外兩個屏幕中進一步呈現。

CustomDropdown.js的代碼是：

    class CustomDropdown extends Component {

        constructor(props) {
            super(props)

            this.state = {
                 title: '',
                 oem: '',
                 subtitle:''
            };
        }

        componentDidMount(){
           this.setState({
             title:this.props.title,
             subtitle: this.props.subtitle,
             oem: this.props.oem, 
           });
           console.log(this.state.title, this.state.oem, this.state.subtitle)
        }

        render() {
             return (
                <View style={{flexDirection:'row', justifyContent: 'space-between'}}>
                  .........  
                </View>
            )
        }
    }


export default withNavigation(CustomDropdown);

當我控制台this.state.title ，它會打印，但是subtitle和oem沒有值。 我什至嘗試將控制台語句放入this.setState()的callback() ，但仍然沒有道具可以打印OEM和字幕。

請幫助解決此問題。

Answer 1

當您不想交付組件時，可以使用withNavigation 。 但是您的代碼是深層嵌套的。

如果要像這樣使用它，則可以像這樣更改代碼。

CustomHeader.js

class CustomHeader extends React.Component {

  constructor(props) {
    super(props)

    this.state = {
      title:'Regions',
      subtitle:'',
      oem: ''
    }
  }

 async componentDidMount(){

   let car_brand = await AsyncStorage.getItem('brand_name');
   let main_oem = await AsyncStorage.getItem('oem_name');

   this.setState({
             oem: main_oem,
             subtitle: car_brand,
   });

   console.log(this.state.oem)
  }


render() {
    console.log(this.state.title)
   const {title, subtitle, oem} = this.state;
    return (
             <View>  
               <CustomDropdown title={title} subtitle={subtitle} oem={oem} /> 
             </View>
          )
     }
}

export default withNavigation(CustomHeader);

CustomDropdown.js

    class CustomDropdown extends React.Component {

        constructor(props) {
            super(props);

            this.state = {
                 title: props.title,
                 oem: props.oem,
                 subtitle: props.subtitle
            };
        }

        componentDidMount(){
           console.log(this.state.title, this.state.oem, this.state.subtitle)
        }

        render() {
             return (
                <View style={{flexDirection:'row', justifyContent: 'space-between'}}>
                  .........  
                </View>
            )
        }
    }


export default CustomDropdown;