Как использовать синхронные и асинхронные функции внутри метода onClick в React - PullRequest
1 голос
/ 14 июля 2020

У меня есть компонент реакции с этим состоянием

const [name, setName] = useState('')
const [comment, setComment] = useState('')
const [notes, setNotes] = useState([])

эта функция обрабатывает элементы ввода для заполнения порядка

const handleComments = () => {
 setNotes([...notes, {
  name,
  comment
 }])
 setName('')
 setComment('')
}

, и эта функция отправляет информацию на сервер

const update = async () => {
 const newNotes = notes.map(note => ({
  name,
  comment 
 }))
 return updateNotesPromise(newNotes)
}

здесь у меня есть кнопка, которая должна выполнять обе функции

<Button onClick={} /> 

Как я могу создать функцию, которая передается через метод onClick и выполняет handleComments для загрузки информации в DOM, а затем, когда эта информация появится, выполняет функцию обновления и сохраняет информацию о заказе в БД?

Ответы [ 2 ]

1 голос
/ 14 июля 2020

Вот способ обработки обновления компонентов и связи сервера с обработкой ошибок:

const onButtonClicked = useCallback(async (name, comment) => {
  // cache the olds notes
  const oldNotes = [...notes];

  // the updated notes
  const newNotes = [...notes, {
    name,
    comment
  }];

  // update the component and assume the DB save is successful
  setNotes(newNotes);

  try {
    // update the data to DB
    await updateNotesPromise(newNotes);
  } catch(ex) {
    // when something went wrong, roll back the notes to the previous state
    setNotes(oldNotes);
  }
}, [notes]);

1 голос
/ 14 июля 2020

Похоже, что вы используете функциональные компоненты, поэтому вы можете создать useEffect, который делает запрос на размещение API всякий раз, когда обновляются заметки:

useEffect(()=> {
  updateNotesPromise(notes); 
},[notes])

Я предполагаю, что updateNotesPromise - это функция, которая делает ваш запросить звонок? Также неясно, почему newNotes отображается из заметок или почему обновление выполняется asyn c, когда оно ничего не ожидает. Ваш onClick просто вызовет handleNotes (я предполагаю, что это ваша кнопка отправки).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...