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

由 oqui发布于 2020-05-09 07:44:24

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

怪我瞎i

2020-05-09 07:44:24

你不能但是，无论何时更新组件的状态，都将[最终]重新呈现组件。

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

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

oqui

这家伙很懒，什么都没留下

积分
0
话题
0
评论
3159
注册排名
1390