React Native Context dispatch удалить текущий экран (элемент) вызывает ошибку рендеринга

Question

В моем приложении у меня есть представление списка рецептов, а также подробное представление только одного рецепта. Я хотел бы, в подробном представлении, удалить рецепт.

export default function RecipeDetails({ route, navigation }) {
  const { recipes, dispatch } = useContext(RecipeContext);

  const id = route.params.item.id;
  const currentRecipe = recipes.find((r) => r.id === id);
  return (
    <ScrollView>
      <TouchableOpacity
        onPress={() => {
          dispatch({ type: "remove", obj: currentRecipe });
          navigation.goBack();
        }}
      >
        <FontAwesomeIcon icon={faTrash} size={20} />
      </TouchableOpacity>
      <Image
        style={styles.img}
        source={images[currentRecipe.image]}
        resizeMode="cover"
      />

Моя цель - отправить действие удаления и затем go вернуться к представлению списка. Тем не менее, сейчас, после отправки удалить пожары, я получаю сообщение об ошибке: «currentRecipe.image» не определено.

Мой вопрос: почему навигация не возвращает к последнему экрану (представление списка), чтобы эта неопределенная ошибка не возникала?

Answer 1

Это происходит потому, что ваш компонент хочет выполнить повторную визуализацию после удаления рецепта, но перед тем, как вы вернетесь назад - он получает новые реквизиты, когда рецепт уже пропущен, и поэтому currentRecipe не определен, а доступ к currentRecipe.image вызывает ошибку .

Что вы можете сделать, это запретить доступ к currentRecipe, если он не существует.

Один из способов сделать это - вернуть null или заполнитель - это не самое элегантное решение:

const currentRecipe = recipes.find((r) => r.id === id);

if (!currentRecipe) return null;

---

Кроме того, вы можете скопировать свой рецепт из контекста в локальное состояние для чтения:

const [currentRecipe] = useState(recipes.find((r) => r.id === id));

Это будет означать, что currentRecipe не изменится после первоначальной загрузки - не когда вы удаляете его, но также и когда пользователь редактирует его (если у него есть такая опция).