Проблема

Вы создаете и ссылаетесь только на одну ссылку React в файле продуктов и передаете ее каждому сопоставленному ProductItem из массива products. Это означает, что каждый <ProductItem ref = {productItemRef} .... /> перезаписывает значение ссылки, а последний сопоставленный элемент — это то, на что productItemRef имеет ссылку. Когда вы нажимаете кнопку «Сохранить», скажем, в модальном окне редактирования продукта «Банан», ссылка пытается вызвать closeModals модального окна редактирования продукта «Манго», а модальное окно «Банан» никогда не закрывается.

Предложение решения

Создание модальных ссылок

Как минимум вам нужно будет создать ссылку React для каждого сопоставленного ProductItem, чтобы на них можно было ссылаться индивидуально.

Пример:

// Array of React refs
const productItemRef = useRef<React.RefObject<ModalRef>[]>([]);

// Set modal refs to current value or create if necessary
productItemRef.current = products.map(
  (_, i) => productItemRef.current[i] ?? createRef()
);

...

return (
  <div className = "flex flex-col gap-2">
    {products.map((product, i) => (
      <ProductItem
        key = {product.id}
        product = {product}
        ref = {productItemRef.current[i]} // <-- pass modal ref
      />
    ))}
  </div>
);

Закрытие модальных окон

Наивный/тривиальный подход мог бы заключаться в том, чтобы просто перебрать весь массив модальных ссылок и вызвать closeModals для каждой из них.

Пример:

useEffect(() => {
  if (actionData?.type === 'success') {
    productItemRef.current.forEach((productRef) =>
      productRef.current?.closeModals()
    );
  }
}, [actionData]);

Улучшенным подходом было бы включение отредактированного идентификатора продукта в данные действия.

Пример:

EditProductForm — включите скрытое поле, которое передает product.Id в данные формы, доступное в обработчике действий.

export function EditProductForm({ setIsOpen, product }: EditProductFormProps) {
  const navigation = useNavigation();

  const isUpdating =
    navigation.formData?.get('intent') === 'edit-product' &&
    navigation.state === 'submitting';

  return (
    <Form method = "post">
      <div className = "flex justify-end gap-2 mt-2">

        {/* Hidden field to include with form data */}
        <input name = "productId" defaultValue = {product.id} hidden />

        {product.name}
        <Button
          type = "button"
          variant = "outline"
          disabled = {isUpdating}
          onClick = {() => setIsOpen(false)}
        >
          Cancel
        </Button>
        <Button
          name = "intent"
          value = "edit-product"
          disabled = {isUpdating}
          type = "submit"
        >
          {isUpdating ? (
            <Loader2 className = "mr-2 h-4 w-4 animate-spin" />
          ) : null}
          Save
        </Button>
      </div>
    </Form>
  );
}

Индексный файл продукта. Получите доступ к идентификатору продукта и верните ответ с данными JSON.

export const action = async ({ request, context }: ActionFunctionArgs) => {
  const formData = await request.formData();
  const productId = formData.get("productId"); // <-- get product id
  const intent = formData.get('intent');

  if (intent === 'edit-product') {
    return json({
      productId, // <-- return product id
      type: 'success',
    });
  }

  return null;
};

Закройте только открытое модальное окно редактирования продукта.

useEffect(() => {
  if (actionData?.type === 'success') {
    productItemRef.current[
      products.findIndex((product) => product.id === actionData?.productId)
    ].current?.closeModals();
  }
}, [actionData]);