反应导航 - 从 redux 存储中删除对象后返回的处理

Question

我正在创建一个使用 redux 存储用户添加的所有对象的应用程序。我有一个显示所有对象的主屏幕，用户可以从中导航到特定对象。在该屏幕上，他可以编辑它并从应用程序中删除它。 我在实现删除功能时遇到问题，我想调度操作并导航到主屏幕。目前，我的代码如下所示：

        // that's how I get object from store in Plant component
        const plant = useSelector((state) =>
        state.plants.plants.find((plant) => plant.id === props.route.params.plantId));

        // onPress deleteButton
        props.navigation.goBack();
        dispatch(deletePlant(plant.id));

        // reducer
        const updatedPlants = [...state.plants].filter((plant) => plant.id !== action.plantId);
        return { ...state, plants: updatedPlants };

但问题是，我的应用在删除植物后崩溃，因为植物变量在植物屏幕上未定义。目前，我找到了一个解决方法，在渲染函数中，我检查植物变量是否未定义，如果是，我只返回空视图。

我觉得有更好的方法，你能帮我吗？

Answer 1

它与going back 无关，它与渲染有关。渲染过程中不应该抛出错误。

1. 如果您在主页中循环plants 并呈现它们，应该没有问题。除非您的 deletePlant 将该数据设置为 undefined，否则不要像使用 splice 那样将其从数组中删除。
2. 如果您的主屏幕被硬编码以显示植物内部的项目，那么检查undefined 值是很常见的。如果empty view是您关心的问题，您也可以返回null。