导航回我的原始组件时不会再次调用 componentWillMount

Question

屏幕A：调用componentWillMount成功，然后导航到屏幕B，

屏幕 B：做一些 redux 更改（这将影响 WillMount 中的数据），然后导航回 A，但不会调用 componentWillMount 并阻止所需数据出现在屏幕上

 screen A:
  componentWillMount(){
    this.props.fetchData();
    console.log('fetched')
 }

 renderItem({item}){
    return <Text>{item.name}</Text>
 }

 render(){
    const array = Object.values(this.props.data)
    return(
        <View style={{flex: 1}}>
        <Inline>
        <View style={styles.container}>
            <View style={styles.headerContainer}>
                <Header style={styles.header} HeaderText={'EmployeeList'} 
  />
            </View>
            <TouchableOpacity style={styles.buttonContainer}
            onPress={()=> this.props.navigation.navigate('CreateEmp')}
             //screen B
            >
                <Text style={styles.buttonStyle}>Add an Employee</Text>
            </TouchableOpacity>
        </View>
        </Inline>
            <FlatList 
            data={array}
            renderItem={this.renderItem}
            keyExtractor={array1 => array1.name}
            />
        </View>

   screen B:

      functionOne(){
    const {name, phone, createEmployee, shift} = this.props
    createEmployee(name, phone, shift)
   }

   functionTwo(){
    this.props.navigation.navigate('EmployeeList')//screen A
   }

   functionCombined(){
    this.functionOne();
    this.functionTwo();
   }

   and calling functionCombined in the class of course

Answer 1

componentWillMount 在屏幕渲染时执行。

但是，在导航到Navigate命令时，如果先移动屏幕，则渲染以绘制屏幕，​​但如果已经渲染，则不再渲染。

该函数应使用push 命令移动以再次运行。

functionTwo(){
    this.props.navigation.push('EmployeeList')//screen A
   }