JSON .пародная проблема с избыточным состоянием

Question

Используя React и Redux, я делаю вызов getNoteById, который возвращает некоторую строку внутри note.

Я хочу JSON .parse переменную note, но если она не определена, тогда установите значение initialValue, если я знаю, что оно будет правильно проанализировано.

Проблема, с которой я сталкиваюсь, заключается в том, что когда я проверяю, является ли JSON.parse(note) неопределенным или нет, я всегда получаю ту же ошибку неопределенного индекса в 0.

Не уверен, как исправить это. Когда компонент загружается и вызывается getNotesById(), при вызове setValue.

const TextEditor = ({ note, getNoteById, clearValues }) => {
  const paramId = match.params.notes;
  const [value, setValue] = useState();

  useEffect(() => {
    getNoteById(paramId);

    if (JSON.parse(note) == undefined) {
      setValue(initialValue);
    } else {
      setValue(JSON.parse(note));
    }

    return () => {
      clearValues();
    };
  }, [paramId, value]);

  return (
    <div>
      <h1> {value} </h1>
    </div>
  );
};

должны отображаться notes или initialValue.

Answer 1

В вашем эффекте отсутствуют зависимости: clearValues, getNoteById и note. Вы должны пропустить setValue к initialValue и выполнить const [value, setValue] = useState(initialValue);, потому что эффект запускается после , рендер и примечание будут неопределенными при первом рендеринге. Убедитесь, что примечание не определено с помощью if(note!==undefined){setValue(JSON.parse(note))}.

Ваш код должен выглядеть примерно так:

const TextEditor = ({ note, getNoteById, clearValues }) => {
  const paramId = match.params.notes;
  const [value, setValue] = useState(initialValue);

  useEffect(() => {
    getNoteById(paramId);

    if(note!==undefined) {
      setValue(JSON.parse(note));
    }

    return () => {
      clearValues();
    };
  }, [clearValues, getNoteById, note, paramId, value]);

  return (
    <div>
      <h1> {value} </h1>
    </div>
  );
};

Я предполагаю, что вы не хотите отправлять getNoteById снова, когда примечание загружается и устанавливается в избыточном состоянии. Возможно создать 2 эффекта:

const TextEditor = ({ note, getNoteById, clearValues }) => {
  const paramId = match.params.notes;
  const [value, setValue] = useState(initialValue);
  //dispatch getNoteById when param id changes
  useEffect(() => {
    getNoteById(paramId);
    return () => {
      //dispatch a cleanup action
      clearValues();
    };
  }, [clearValues, getNoteById, paramId]);
  //set the note to it's parsed json when it changes
  //  and is not undefined
  useEffect(() => {
    if (note !== undefined) {
      setValue(JSON.parse(note));
    }
  }, [note]);
  return (
    <div>
      <h1> {value} </h1>
    </div>
  );
};