使用 setState 作为异步函数来保存数据

Question

我正在尝试更新我的 react 本机组件中的状态，我需要将此状态保存到存储中。 由于 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 用作同步函数？如果不可能，还有什么选择？

Answer 1

你不能。但是，每当您更新组件的状态时，组件都会 [最终] 重新渲染。

如果您的目标是将组件状态持久化到存储中，您可以使用以下方式：

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')
  // ...
}