Блог

Я взял этот код из документации React. Но, видимо, я неправильно его использую.

 import { useEffect, useRef } from 'react';

export default function usePreviousState(state) {
  const ref = useRef();

  useEffect(() => {
    ref.current = state;
  });
  return ref.current;
}
  

Это мой функциональный компонент:

 export default function personInfo({ data, setData }) {
  const classes = useStyles();
  const prevData = usePreviousState(data);

  function handleFieldChange(event) {
    setData({
      ...data,
      [event.target.id]: event.target.value,
    });
  }

  async function handleSaveClick(event) {
    event.preventDefault();

    const formData = normalizeData(data);
    try {
      if (JSON.stringify(data) !== JSON.stringify(prevData)) {
        await updatePeronInfo(formData);
        alert('Successfully updated personal information!');
      } else {
        await createPersonInfo(data);
        alert('Your personal information has been saved!');
      }
    } catch (error) {
      handleErrors(error);
    }
  }
  

Первая проблема заключается в том, что я не могу опубликовать информацию, она всегда выдает мне POST и PATCH, но выдает ошибку 404 Страница не найдена, поэтому она вообще не создавала и не обновляла информацию. Если я изменю оператор if с (JSON.stringify(data) !== JSON.stringify(prevData)) на (JSON.stringify(data) === JSON.stringify(prevData)) каким-то образом ему удастся ОПУБЛИКОВАТЬ данные. Но позже, если я захочу обновить информацию, кажется, что она пытается выполнить createPersonInfo, что приводит к внутренней ошибке сервера error 500, поскольку она уже создана. Любая идея, что я делаю не так, и чего мне не хватает в «ЛОГИКЕ IF». По-видимому, prevData не определено в начале. Как я должен это исправить?

Вам нужно добавить простую проверку:

 if (typeof prevData !== 'undefined') {
       if (JSON.stringify(data) !== JSON.stringify(prevData)) {...}
} else {...}