Блог

Я пытаюсь обновить продукт на основе текущего выбранного языка.

В моем случае продукт обновляется, но объект изменяется таким образом, что язык отсутствует, и доступен только тот язык, на котором он был обновлен.

Одно из текстовых полей выглядит следующим образом:

 <TextField
  type="text"
  label="Title"
  name="product-title"
  value={title}
  onChange={e => setTitle(e.target.value)}
/>
 

Я получаю заголовок из магазина следующим образом:

 const [title, setTitle] = useState(product.title[lang]);
 

Мой submitHandler, запускаемый простой кнопкой, выглядит следующим образом:

   const submitHandler = e => {
    e.preventDefault();

    dispatch(
      updateProduct(product._id, {
        ...product,
        title: { [lang]: title },
      })
    );
  };
 

Действие updateProduct выглядит следующим образом:

 export const updateProduct: ActionType<{ id: string, data: Partial<Product> }> = (id: string, data: Partial<Product>) => ({
  type: actionTypes.UPDATE_PRODUCT,
  payload: { id, data }
});
 

И я отправляю запрос на ИСПРАВЛЕНИЕ следующим образом:

 updateProduct = ({ id, data }: { id: string, data: Partial<Product> }) =>
  http.patch(`/api/products/${id}`, data);
 

Свойство title объекта Products выглядит так до обновления:

 title: {de: "Nudeln", en: "Noodles"}
 

После обновления внезапно вот так (‘de’ становится нулевым):

 title: {de: null, en: "Noodles Updated"}
 

Я хотел бы получить этот результат:

 title: {de: "Nudeln", en: "Noodles Updated"}
 

Мой редуктор для обновления продукта выглядит следующим образом:

 function reducer(state = initialState, action: ReturnType<ActionType>) {
  switch (action.type) {
    case actionTypes.UPDATE_PRODUCT_SUCCESS:
      return {
        ...state,
        currentProduct: { ...action.payload },
        loaded: true,
      };
}
 

Таким образом, должен быть обновлен только текущий отредактированный язык, а другой язык должен оставаться таким, какой он есть.

Что я делаю не так и как я могу быстро решить эту проблему?