React Native 如何导航到屏幕并重置一些状态？答案

【问题标题】：React Native how to navigate to a Screen and reset some of the states?React Native 如何导航到屏幕并重置一些状态？
【发布时间】：2024-05-18 06:35:02
【问题描述】：

再次，我需要一些帮助。我正在尝试为我的应用程序实现购物车。

应用程序有以下逻辑：

BarcodeScreen (params) => MenuScreen loads data from params => CheckoutScreen

问题是，我想要一个“重置”按钮来删除购物车中的所有产品。出于这个原因，在我的 CheckoutScreen 上，有一个重置按钮，它导航到上一个屏幕 (MenuScreen)，它需要重置一些状态变量（加载数据的参数必须保留）。

这里是菜单屏幕代码：

function MenuScreen({ route, navigation }) {
    const params = route.params;

    const [products, setProducts] = useState([]);
    const [loading, setLoading] = useState(true);
    const [items, setItems] = useState([]);
    const [length, setLength] = useState(0);

    useEffect( () => {
        loadMenu();
    }, []);

    const loadMenu = async () => {
        const response = await MenuApi.getMenu(params.data);
        if(!response.ok) Alert.alert(response.data.message);
        setLoading(false);
        setProducts(response.data.data);
    }

    const addItem = (item) => {
        items.push(item);
        setLength(items.length);
    }

    return (
        <>
            <View style={styles.activity}>
                <ActivityIndicator animating={loading} size="large"/>
            </View>
            <FlatList 
                data={products}
                ...
            />
            <View style={styles.activity}>
                <Text>You have {length} products in your order</Text>
            </View>
            <View style={styles.activity}>
                <Button title="View Basket" onPress={() => navigation.navigate("Checkout", items)}></Button>
            </View>
        </>
    );
}

这是 CheckoutScreen 代码：

function CheckoutScreen({ route, navigation }) {
    const products = route.params;

    return (
        <>
        <View style={styles.activity}>
            <FlatList 
                data={products}
                ...
            />
        </View>
        <View style={styles.activity}>
            <Button title="Submit"></Button>
            <Button title="Reset" onPress={() => navigation.reset({
                index: 0,
                items: [],
                routes: [{ name: "Menu"}]
            })}>
            </Button>
        </View>
        </>
    );
}

现在，当我返回 MenuScreen 时，items = 0，但我没有 params 数据了。

【问题讨论】：

为什么不使用 navigation.reset 而是执行 navigation.navigate("MenuScreen", items)}？
调用`loadMenu()`的useEffect有一个空的依赖数组，这意味着它只被调用一次。所以products 不会在params.data 发生变化时更新。
另外，如果您想在返回菜单时保留所有参数，请在导航调用中包含当前参数...route.params
@LindaPaiste 1) 我需要更改 useEffect 中的某些内容吗？ 2) 使用navigation.reset() 或navigation.navigate() 3) 如果我需要使用reset()，如何传递route.params？
您有可以分享的 repo 或 CodeSandbox 吗？这样玩对我来说更容易。我对 react-router 比 react-navigation 更熟悉，但它们是相似的。当您返回组件屏幕时，它会从自己的内部状态获取其项目并忽略params.items，因此您需要一个效果来同步它们。但这感觉很草率，我认为通过导航来回传递MenuScreen 组件状态不是您想要做的。我会尝试将状态提升到Page 或App 组件。也许通过上下文访问。

标签： reactjs react-native use-state

【解决方案1】：

MenuScreen 和 CheckoutScreen 是两个不同的屏幕，每个屏幕都有自己的状态。如果您希望两个屏幕都共享该状态并对其进行操作并在它们之间保持状态，我建议您使用 React Redux 工作。

【讨论】：