использовать setState как асинхронную функцию для сохранения данных - PullRequest
Новая
       65

использовать setState как асинхронную функцию для сохранения данных

0 голосов
/ 09 мая 2020

Я пытаюсь обновить состояние в моем собственном компоненте реакции, и мне нужно сохранить это состояние в хранилище. Поскольку setState является асинхронным, я попытался передать обратный вызов setState следующим образом: 

 setData(
        {
          ...data,
          visible: true,
          color: Theme.COLORS.SUCCESS,
          message: 'Vous êtes connecter avec succès.',
          loading: false,
          person: response,
          token: response.data.token,
          refreshToken: response.data.refreshToken,
        },
        () => {
          console.log(token);
        },
      );

Я получил это предупреждение: обновления состояния из хуков usestate () и usereducer () не поддерживают второй аргумент обратного вызова. .

Как я могу использовать setState как синхронную функцию? и если это невозможно, то какая альтернатива?

1 Ответ

1 голос
/ 09 мая 2020

Вы не можете. Но всякий раз, когда вы обновляете состояние компонента, он будет [в конечном итоге] повторно отрисован.

Если ваша цель - сохранить состояние компонента в хранилище, вы можете go с чем-то вроде этого: 

class SomeComp extends React.Component {
  componentDidMount() {
    this.setState(localstorage.getItem('somekey'))
  }

  componentDidUpdate(_prevProps, _prevState, _snapshot) {
    localstorage.setItem('somekey', JSON.stringify(this.state))
  }
}

Если лично использовать этот крючок для той же цели: 

import ls from 'local-storage'
import { useState } from 'react'

// useState, but value is retrieved from local storage first time,
// and stored in local storage when updated
const useLSBackedState = (defaultValue, localStorageKey) => {
  const lsValue = ls.get(localStorageKey)
  const [value, doSetValue] = useState(
    lsValue === undefined ? defaultValue : lsValue
  )

  const setValue = value => {
    if (typeof value === 'function') {
      doSetValue(v => {
        const newValue = value(v)
        ls.set(localStorageKey, newValue)
        return newValue
      })
    } else {
      doSetValue(value)
      ls.set(localStorageKey, value)
    }
  }

  return [value, setValue]
}

// SomeComponent.js
const SomeComponent = _props => {
  const [sidebarOpen, setSidebarOpen] = useLSBackedState(false, 'sidebarOpen')
  // ...
}
...