React导航-从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