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
   }

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

1 个答案: