Как организовать доступ к стейту в таком случае (navigation.addListener())?

Question

[Владимир]

Помогите, пожалуйста, уже всю голову сломал. Есть функциональный компонент, в нём есть стейт и есть необходимость отловить выход из этого компонента и сохранить стейт в файл. Делаю вот так:

React.useEffect(
    () =>
      navigation.addListener('beforeRemove', (e) => {
        // Prevent default behavior of leaving the screen
        e.preventDefault();
        // Prompt the user before leaving the screen
        Alert.alert(
          "Вы уверены?",
          "Вы точно хотите завершить?",
          [
            { text: "Нет, продолжаем", style: 'cancel', onPress: () => { } },
            {
              text: "Да, завершить",
              style: 'destructive',
              onPress: () => {
                writeData(logData)
                navigation.dispatch(e.data.action)
              },
            },
          ]
        );
      }),
    [navigation]
  );

Стейт это собственно logData. Проблема в том, что я всегда вижу только дефолтное состояние стейта. И даже если пытаюсь обратиться к нему не из обработчика события, а из writeData (это функция, объявленная внутри компонента), то всё равно получается то же самое. Актуальное значение стейта получить не выходит никак.

Понятно, что тут есть что-то простое, чего я не понимаю, подскажите что?

Answer 1

[Антон Горецкий]

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

Comments

[Владимир]

В том-то и дело, что на момент выхода из компонента в стейте уже давно лежит нужное значение. У меня каждые полминуты сохраняется этот лог и файл пишется нормально. Причём лог инкрементальный, новые строки добавляются к предыдущим.

Потом нажимаю кнопку выхода, выбираю "Да, завершить" в алерте и внезапно оказывается, что во writeData передаётся дефолтное состояние logData вместо текущего, давно уже обновлённого и даже несколько раз записанного в файл. Как будто оно осталось в замыкании или что-то вроде того.

На грабли с асинхронным обновлением стейтов я уже успел наступить и проникнуться :).

[Антон Горецкий]

вместо writeData(logData) нужно попробовать

writeData(()=>{
const logData = МетодВозвращающийАктуальноеЗначениеСтейта();
return logData;
})

[Владимир]

Антон Горецкий, секундочку, но logData это и есть стейт (const [logData, setLogData] = useState('')). То-есть завернуть получение значения ещё в одну функцию?

[Антон Горецкий]

Владимир, если writeData(logData) рендерится и попадает в html, то оно там всегда будет то значение, которое было на момент рендера. Ну т.е. типа того writeData('какое-то_значение') Поэтому, надо аргументом не значение, а ф-ю, которая будет возвращать актуальное значение.

[Владимир]

Антон Горецкий, в html logData не попадает. Это стейт, в котором накапливается лог, и периодически сбрасывается в файл. Вот сама writeData (за прошедшее время немного изменилась):

async function writeData(key = lastKeyPressed, data = logData) {
    let logDataString = data
    const time = new Date(Date.now())
    getLocation().then((loc) => {
      logDataString = logDataString + constructLogString(loc, time, key)
      if (key == END_SURVEY) {
        writeToFile(fileName, logDataString)
      } else {
        setLogData(logDataString)
      }
    })
  }

И для регулярной записи вот такой хук:

useEffect(() => {
    if (logCounter == 9) {
      writeToFile(fileName, logData)
      setLogCounter(0)
    } else {
      setLogCounter(logCounter + 1)
    }
  }, [logData]
  )

Хотя счётчик наверное лучше было бы делать не стейтом, а рефом, он тоже нигде и никак не выводится. Вообще, это всё внутренняя кухня, пользователь её никак не видит.

[Антон Горецкий]

Владимир, кстати, вспомнил - если хотите отловить выход из компонента - нужно ипользовать конструкцию return в useEffect :

useEffect(() => {
// основное тело функции
return ()=>{ // здесь ф-я которая вызывается при размонтировании компонента}
  }, ['зависимости']
  )

можно попробовать переписать код таким образом

[Владимир]

Антон Горецкий, да, спасибо, я так фоновую геолокацию отключаю.

В общем, пока перенёс всю логику из хука в onPress кнопки выхода из компонента и отключил свайпы и кнопку "Назад" на проблемном экране. Так работает, а с хуками потом уже буду разбираться, а то как всегда дедлайн :).