向后導航時丟失本機道具

Question

我有一個簡單的問題：我有一個導航到子組件的父組件，子組件應該在子組件向后導航時更新父組件上的 state ( this.props.navigation.navigate("parentComponent", { params }) ）。 根據文檔，這應該很容易： https://reactnavigation.org/docs/params/

如果屏幕已經存在，則導航操作被視為goBack操作。 但是，當我這樣做並嘗試在返回后在父屏幕中console.log道具時，它顯示為空。

父類.js

 <View style={styles.availabilitycontainer} visible={true}>
          <View style={styles.titlegroupcontainer}>
            <Text style={styles.abouttitle}>Schedule Availability</Text>
            {/*Redirect to edit schedule*/} 
            <TouchableOpacity
              style={styles.cameracantainer}
              onPress={() =>
                this.props.navigation.navigate("ChildComponent")
              }
            >
              <Image source={Editoutline} />
            </TouchableOpacity>
          </View>

          <ProfileAvalability />
        </View>

子.js

async submitToBackend(){
    /* Code to submit to backend omitted */
  this.props.navigation.navigate('ParentComponent', { params });
}

Answer 1

導航並不是真的那樣工作。 如果它檢測到 ParentComponent 已經存在於堆棧中，它只會將其向前推進，而不必重新渲染/重新加載。

我的建議是將第二個參數作為 function 傳遞，它將執行更改，例如：

submitData(data) {
  setState(data)
}

然后當你給孩子打電話時：

props.navigation.navigate("ChildComponent", { submitData })

然后在 ChildComponent 內部，當你完成處理時，調用 submitData([insert your data here])，然后 function 將執行對 ParentComponent 的寫入。 這假定您正在使用 useState()。