Question

我很难弄清楚如何使用React和TS从localStorage设置组件状态。在我检查localStorage实例是否存在之后，它仍然说不兼容的类型，因为localStorage.getItem()仍然可以返回字符串或null。

如果我更改界面并添加string | null我可以设置localStorage的状态，但是我不能再将localStorage设置为自己，因为localStorage.setItem()似乎只接受{{ 1}}而不是string

修改

我想出了这个＆＃34;解决方案＆＃34;问题。我不确定这是不好的做法，但似乎有效。如果这可以用更好的方式写出来，请告诉我。

string | null

编译错误：

类型＆＃39; {inputFrom：string |的参数空值; }＆＃39;不能分配给＆＃39; Pick＆＃39;类型的参数。财产类型＆输入来自＆＃39;是不相容的。输入＆＃39;字符串|空＆＃39;不能指定为＆＃39; string＆＃39;。输入＆＃39; null＆＃39;不能分配给＆＃39;字符串＆＃39;。

我的界面实现如下：

componentWillMount() {
    let from = localStorage.getItem('from');
    let to = localStorage.getItem('to');
    let fromId = localStorage.getItem('fromId');
    let toId = localStorage.getItem('toId');

    if (typeof from === 'string' &&
        typeof to === 'string' &&
        typeof fromId === 'string' &&
        typeof toId === 'string') {

      this.setState({
        inputFrom: from,
        inputTo: to,
        fromId: fromId,
        toId: toId,
      });
    }
  }

我的组件

interface State {
  inputFrom: string,
  inputTo: string,
  fromId: string,
  toId: string,
  tripdata: {},
  loading: boolean,
  error: boolean,
}

Answer 1

在我的特定情况下，我试图从本地存储中获取一个布尔值。本地存储不保存布尔值。所以如果你给它 'true' 例如，它会将它保存为一个字符串。这就是 if 的用途。在实践中，你可以让这看起来更漂亮，但为了清楚起见，我在这里使用了 else if。

在这种情况下，我将 checkLocalStorage 函数放置在组件之外。我不明白为什么它不能在组件内部工作，但 this 帖子告诉我将它放在组件外部，所以我就是这样做的。

ps：如果本地存储中没有任何内容，您会得到一个空值。这就是我用来设置默认值的方法。

const checkLocalStorage = () => {
  const ls = localStorage.getItem('item')
  if (ls === null || ls === 'true') {
    return true
  } else if (ls === 'false') {
    return false
  }
}

export const MyComponent = () => {

  const [state, setState] = useState(checkLocalStorage())

// rest of your code here

如何从localStorage设置React状态？

1 个答案: