编辑状态后返回上一画面并返回

Question

好吧，我知道网上有很多关于应该如何做的猜测，但是我对其中大多数都不满意，或者它们已经过时了：）

这是我的设置的简化表示：

// Navigator
const Stack = createStackNavigator();
<Stack.Navigator
    initialRouteName={"A"}
>
    <Stack.Screen
        name={"A"}
        component={A}
    />
    <Stack.Screen
        name={"B"}
        component={B}
    />
    <Stack.Screen
        name={"C"}
        component={C}
    />
</Stack.Navigator>

Redux是我选择的状态管理器，对于我的3个虚拟屏幕都可以正常工作这是一个虚拟状态和化简器：

const initialState = {
    items: [
        {prop: "a"},
        {prop: "b"},
        {prop: "c"},
    ]
}
const dummyReducer = (state = initialState, action) => {
    switch(action.type) {
        case "EDIT":
            const dummyEdit = state.items.pop();
            dummyEdit.prop = "c (edited)";
            return {
               items = [...state.items, dummyEdit]
            }
    }
}

这是我非常有创意的屏幕

// Class A
render() {
    return <A>
        <ListView ... data={state.items} />
    </A>
}

// Class B
render() {
    return <B>
        <Text>state.item.prop</Text>
    </B>
}

// Class C
render() {
    return <C>
        <Input value={state.item.prop}
            onChangeText={text => dispatch({type: EDIT})}
        ></Input>
    </C>
}

因此，屏幕A只是一个列表，该列表导航到显示项目属性的屏幕B。在屏幕B上，您可以编辑该项目，然后进入屏幕C。当您在屏幕C上编辑项目时，减速器将更新状态。之后，您可以navigation.goBack()来显示B。

所有屏幕都连接到相同的异径管和状态。当我在屏幕B的渲染功能中放置一个断点时，我可以看到状态确实在C输入onTextChanged]后立即更新。

我（想我）知道的事情

• 在屏幕B上，这无济于事：shouldComponentUpdate() {return true;}
• Redux懒惰地比较对象，因此prevState.items === state.items为真，并且屏幕不更新
• 即使正在调用render函数，这并不意味着屏幕将被更新
• 我可以navigation.dispatch(StackActions.pop(2)); navigation.navigate("B");更新屏幕B，但这似乎牵强，并且留下了向后过渡动画

包裹

"react": "16.9.0",
"react-native": "^0.61.5",
"react-navigation": "^4.2.2",
"@react-navigation/drawer": "^5.1.1",
"@react-navigation/native": "^5.0.9",
"@react-navigation/stack": "^5.1.1",
希望你们中的一些人意识到我面临的问题。非常感谢您的帮助。

好吧，我知道网上有很多关于应该如何做的猜测，但是我对其中的大多数都不满意，或者它们已经过时了:)这是我的设置的简化表示：// ...] >

Answer 1

好，所以我设法弄清楚出了什么问题。我以为问题是StackNavigator是错误的我的屏幕B比我给出的示例复杂得多，因此我将添加一些细节。

// Class B
render() {
    return <B>
        <CustomTextContainer data={state.item}>
            <CustomText data={state.item.prop1} />
            <CustomText data={state.item.prop2} />
        </CustomTextContainer>
    </B>
}