Блог

Главная - Вопросы по программированию - Перехват реакции не обновляется

Перехват реакции не обновляется

#javascript #reactjs

#javascript #reactjs

Вопрос:

В React у меня есть перехват с именем «примечание», где у меня установлено состояние для создания объекта. Этот объект загружается с некоторой информацией о заполнителе, когда я сначала создаю карточку, а затем эта информация загружается в «addNote», который создает новую заметку и сохраняет ее в массиве заметок. Когда я хочу восстановить эту заметку, она запускает showCard, где карточка должна быть извлечена и загружена обратно в форму. Смотрите ниже

 const [notes, setNotes] = useState([]);
  const [showCreate, setCreate] = useState(false);
  const [note, setNote] = useState({});
  let currentNote = {};

  function toggleCreateCard() {
    setCreate(oldCreate => !oldCreate);
  }
  function addNote(newNote) {
    setNotes(prevNotes => {
      return [...prevNotes, newNote];
    });
  }
  function createNewCard(newItem) {
    setNote({
      header: newItem,
      content: "",
      checklist: [],
      pictures: [],
      dueDate: "",
      comments: []
    });
    toggleCreateCard();
  }
  function showCard(id) {
    currentNote = notes[id];
    setNote(currentNote);
    toggleCreateCard();
  }

Проблема, с которой я сталкиваюсь, заключается в том, что let «currentNote» правильно извлекает заметку из массива notes. Однако, когда я пытаюсь обновить состояние заметки, заголовок загружается некорректно. Кажется, что сохраняется последнее состояние «примечание», когда был запущен процесс создания карточки.

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

index.js:27 {header: "test", content: "test1234 test1234 test1234 test1234 test1234 test1…234 test1234 test1234 test1234 test1234 test1234 ", checklist: Array(2), pictures: Array(0), dueDate: "", …}

index.js:27 {header: "test", content: "", checklist: Array(0), pictures: Array(0), dueDate: "", …}

Как мне правильно обновить состояние note?

ПРАВКА 1 (дополнительная информация): функции «createNewCard» и «showCard» вызываются двумя компонентами, приведенными ниже:

 <Body
        noteList={notes}
        removeCard={deleteNote}
        submitNote={addNote}
        showCard={showCard}
      />
      {showCreate ? (
        <CreateCard
          note={note}
          addNote={addNote}
          createOff={toggleCreateCard}
        />

Обычно примечание загружается специально для компонента «CreateCard», который вызывает это и включает подкомпоненты для отдельных полей формы, чтобы сделать его более читаемым

   const [loadNote, setNote] = useState({
    header: props.note.header,
    content: props.note.content,
    checklist: props.note.checklist,
    pictures: props.note.pictures,
    dueDate: props.note.dueDate,
    comments: []
  });
  function handleChange(event) {
    setNote(prevNote => {
      return {
        ...prevNote,
        [event.name]: event.value
      };
    });
  }

  function submitNote() {
    props.addNote(loadNote);
    props.createOff();
  }
  return (
    <form
      className="create-card form-styling shadow-15px lato"
      onKeyPress={e => {
        e.key === "Enter" amp;amp; e.preventDefault();
      }}
    >
      <Title header={loadNote.header} update={handleChange} />
      <Description description={loadNote.content} update={handleChange} />
      <Checklist checklist={loadNote.checklist} update={handleChange} />
      <Pictures pictures={loadNote.pictures} update={handleChange} />
      <DueDate duedate={loadNote.dueDate} update={handleChange} />
      <Fab color="primary" aria-label="add" size="small" onClick={submitNote}>
        <AddIcon />
      </Fab>
    </form>
  );

Весь проект прямо сейчас находится в code sandbox, если требуется более подробная информация https://codesandbox.io/s/ideaboard-listing-tool-n0je5?file=/src/components/App.jsx:1263-1539

Комментарии:

1. Привет, что ты передаешь в id в showCard? id. Вы пытаетесь ссылаться на массив по индексу. Также, где вы регистрируете примечание, setNote — это асинхронный метод.

2. да, я передаю индекс для идентификатора в showCard. что касается записи, я настроил консоль. регистрируется после «currentNote = notes[id];» для первого примера и «setNote(currentNote);» для второго примера. То, что на самом деле отображается на карточке прямо сейчас, — это просто название объекта в массиве Notes, даже если в note есть приведенный пример, но прямо сейчас я пытаюсь выяснить, почему я не могу заставить note правильно обновляться

3. Правильно, значит, строка после setNote, примечание еще не имеет значения. В этом сообщении в блоге говорится о том, что перехваты являются асинхронными и как это обойти, возможно, это поможет: sung.codes /blog/2018/12/07/ …

4. Чао, тебе нужно добавить больше кода, чтобы лучше понять твою проблему. Кто вызывает createNewCard , showCard и addNote ?

5. @GiovanniEsposito Я добавил больше деталей и ссылку на всю изолированную среду кода, если потребуется что-то еще помимо этого.

Ответ №1:

Итак, я, по-видимому, бегал кругами, преследуя свой собственный хвост. Сами данные фактически уже отправлялись на карту, у меня просто не было правильных имен свойств, которые вызывались, поэтому я получал только свое название карты и никакой другой информации. Из-за этого все попытки консольного логирования данных, поступающих на карту, были спорными. Я все еще не могу сказать, что понимаю функциональность асинхронности, но, по крайней мере, я получаю данные в