Reactjs 如何从localStorage设置反应状态？

我很难弄清楚如何使用React和TS从localStorage设置组件状态。在检查localStorage实例是否存在后，它仍然显示不兼容类型，因为

localStorage.getItem（）

仍然可以返回字符串或null

如果我更改接口并添加

string | null

我可以从localStorage设置状态，但是我无法再自行设置localStorage，因为

localStorage.setItem（）

似乎只接受

string

而不接受

string | null

编辑

我想出了这个问题的“解决方案”。我不确定这是否是一个坏习惯，但它似乎有效。如果这可以写在一个更好的方式，请让我知道

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,
      });
    }
  }

编译错误：

类型为“{inputFrom:string | null；}”的参数不能分配给类型为“Pick”的参数。 属性“inputFrom”的类型不兼容。 类型“string | null”不可分配给类型“string”。 类型“null”不可分配给类型“string”

我的接口实现如下：

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

我的组件

import * as React from 'react';
import Header from './components/Header';
import SearchForm from './components/search/SearchForm';
import API from './api/APIService';
import TripTable from './components/trips/TripTable';
import Loading from './components/atoms/Loading';
import Error from './components/atoms/Error';
import './App.css';
const api = new API;

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

class App extends React.Component<any, State> {
  constructor() {
    super();
    this.state = {
      inputFrom: '',
      inputTo: '',
      fromId: '',
      toId: '',
      tripdata: {},
      loading: false,
      error: false,
    };
  }

  componentWillMount() {
    let from = localStorage.getItem('from');
    if (from !== null || from !== undefined) {
      this.setState({
        inputFrom: from,
      });
    }
  }

  handleSubmit = () => {
      if (this.state.fromId !== '' && this.state.toId !== '') {
        this.setState({error: false});
        this.setState({loading: true});
        api.GetAccessToken()
        .then((token: string) => {
          api.GetTripFromSearch(token, this.state.fromId, this.state.toId)
        .then((res) => {
          this.setState({
            tripdata: res,
            loading: false,
          });
        });
          localStorage.setItem('from', this.state.inputFrom);
          localStorage.setItem('to', this.state.inputTo);
          localStorage.setItem('fromId', this.state.fromId);
          localStorage.setItem('toId', this.state.toId);
      });
    } else {
      this.setState({error: true});
    }
  }

  render() {
    let triptable: JSX.Element | null;
    let loading: JSX.Element | null;
    let error: JSX.Element | null;

    if (this.state.tripdata !== null) {
      triptable = <TripTable tripdata={this.state.tripdata} />;
    } else {
      triptable = null;
    }
    if (this.state.loading) {
      loading = <Loading />;
      triptable = null;
    } else {
      loading = null;
    }
    if (this.state.error) {
      error =  <Error />;
    } else {
      error = null;
    }
    return (
        <div>
          <Header />  
          <SearchForm 
            resetInputId={this.resetInputId}
            handleInputFrom={this.handleInputFrom}
            handleInputTo={this.handleInputTo}
            handleSubmit={this.handleSubmit}
            error={error}
            handleSwap={this.handleSwap}
          />
          {loading}
          {triptable}
        </div>        
    );
  }
}


export default App;

import*as React from'React'；
从“./components/Header”导入标题；
从“./components/search/SearchForm”导入SearchForm；
从“/API/APIService”导入API；
从“./components/trips/TripTable”导入TripTable；
从“./components/atoms/Loading”导入加载；
从“./components/atoms/Error”导入错误；
导入“/App.css”；
常量api=新api；
界面状态{
inputFrom:string，
输入：字符串，
fromId:string，
托伊德：弦，
tripdata:{}，
加载：布尔，
错误：布尔，
}
类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
输入自：“”，
输入：“”，
fromId:“”，
toId:“，
tripdata:{}，
加载：false，
错误：false，
};
}
组件willmount（）{
let-from=localStorage.getItem（'from'）；
if（from！==null | | from！==未定义）{
这是我的国家({
输入来源：来源，
});
}
}
handleSubmit=（）=>{
if（this.state.fromId！=''&&this.state.toId！=''）{
this.setState（{error:false}）；
this.setState（{loading:true}）；
api.GetAccessToken（）
.然后（（令牌：字符串）=>{
api.GetTripFromSearch（令牌，this.state.fromId，this.state.toId）
。然后（（res）=>{
这是我的国家({
tripdata:res，
加载：false，
});
});
localStorage.setItem（'from'，this.state.inputFrom）；
localStorage.setItem（'to'，this.state.inputTo）；
localStorage.setItem（'fromId'，this.state.fromId）；
localStorage.setItem（'toId'，this.state.toId）；
});
}否则{
this.setState（{error:true}）；
}
}
render（）{
让triptable:JSX.Element | null；
让加载：JSX.Element | null；
let错误：JSX.Element | null；
if（this.state.tripdata！==null）{
triptable=；
}否则{
triptable=null；
}
if（this.state.loading）{
加载=；
triptable=null；
}否则{
加载=空；
}
if（this.state.error）{
误差=；
}否则{
错误=null；
}
返回(
{加载}
{triptable}
);
}
}
导出默认应用程序；

我在你的代码中看不到任何

选择

类型，它来自哪里？在这篇文章中你的代码是最新的吗？谢谢回复。代码是最新的。真奇怪。我的代码中没有Pick这个词。然而，我认为我找到了解决问题的办法。也许很难看，但它现在可以用了。我想你也可以在

handleSubmit

中进行类型检查，但我不确定