类型为“ string | null”的参数不能赋给类型为“ string”的参数。类型‘ null’不能赋值给类型‘ string’

我有一个 dotnetcore 20和 angular4项目，我试图创建一个 userService，让用户到我的家庭组件。后端工作得很好，但是服务不行。问题出在 本地存储上。我得到的错误消息是:

类型为“ string | null”的参数不能赋给类型为“ string”的参数。 类型‘ null’不可赋值给类型‘ string’。

还有我的用户服务

import { User } from './../models/users';
import { AppConfig } from './../../app.config';
import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions, Response } from '@angular/http';






@Injectable()
export class UserService {
constructor(private http: Http, private config: AppConfig) { }


getAll() {
return this.http.get(this.config.apiUrl + '/users', this.jwt()).map((response: Response) => response.json());
}


getById(_id: string) {
return this.http.get(this.config.apiUrl + '/users/' + _id, this.jwt()).map((response: Response) => response.json());
}


create(user: User) {
return this.http.post(this.config.apiUrl + '/users/register', user, this.jwt());
}


update(user: User) {
return this.http.put(this.config.apiUrl + '/users/' + user.id, user, this.jwt());
}


delete(_id: string) {
return this.http.delete(this.config.apiUrl + '/users/' + _id, this.jwt());
}


// private helper methods


private jwt() {
// create authorization header with jwt token
let currentUser = JSON.parse(localStorage.getItem('currentUser'));
if (currentUser && currentUser.token) {
let headers = new Headers({ 'Authorization': 'Bearer ' + currentUser.token });
return new RequestOptions({ headers: headers });
}
}

而我的家，组件就是

import { UserService } from './../services/user.service';
import { User } from './../models/users';
import { Component, OnInit } from '@angular/core';


@Component({
moduleId: module.id,
templateUrl: 'home.component.html'
})


export class HomeComponent implements OnInit {
currentUser: User;
users: User[] = [];


constructor(private userService: UserService) {
this.currentUser = JSON.parse(localStorage.getItem('currentUser'));
}


ngOnInit() {
this.loadAllUsers();
}


deleteUser(_id: string) {
this.userService.delete(_id).subscribe(() => { this.loadAllUsers() });
}


private loadAllUsers() {
this.userService.getAll().subscribe(users => { this.users = users; });
}

错误在 JSON.parse(localStorage.getItem('currentUser'));上

274656 次浏览
小开
最佳答案

正如错误所说，localStorage.getItem()可以返回字符串或 null。JSON.parse()需要一个字符串，因此您应该在尝试使用它之前测试 localStorage.getItem()的结果。

例如:

this.currentUser = JSON.parse(localStorage.getItem('currentUser') || '{}');

或者也许:

const userJson = localStorage.getItem('currentUser');
this.currentUser = userJson !== null ? JSON.parse(userJson) : new User();

参见 来自威廉 · 德尼斯的回答。如果你确信 localStorage.getItem()调用永远不会返回 null，你可以使用非空断言操作符来告诉打印脚本你知道你在做什么:

this.currentUser = JSON.parse(localStorage.getItem('currentUser')!);
小开

接受的答案是正确的，只是想添加一个更新、更短的答案。

this.currentUser = JSON.parse(localStorage.getItem('currentUser')!);
小开

通过使用上述解决方案，我已经努力使这个问题在我的案例中起作用，但是没有一个成功。 对我起作用的是:

   const serializableState: string | any = localStorage.getItem('globalState');
return serializableState !== null || serializableState === undefined ? JSON.parse(serializableState) : undefined;

我必须将变量强制转换为 string | any，然后在解析它之前检查变量是否为 null 或未定义

小开

非空断言操作符非常适合我:

(1)对我来说

this.currentUserSource.next(null!)

(2)就你而言

this.currentUser = JSON.parse(localStorage.getItem('currentUser')!);
小开

类型‘ string | null’不可赋值给类型‘ string’。类型‘ null’不可赋值给类型‘ string’。

export class TodoComponent implements OnInit {
  

loacalitems!: string;
todos!: Todo[];


constructor() {
this.loacalitems = localStorage.getItem("todos");
}

因为 localStorage.getItem()返回 string or null解决这个问题任何变量这个类型错误是定义变量

localitems!: string | null;

这个变量保持类型值字符串或空。 那就写逻辑

要不然就是人手不够

this.todos = this.localitems !== null ? JSON.parse(this.localitems) : [];

如果-否则

if(this.localitems !== null){
// item not null code
this.todos = JSON.parse(this.localitems)
}else{
// item is null code
this.todos = []
}
小开 
  localsetItem: string | null;
constructor() {
this.localsetItem=localStorage.getItem("todos")
if(this.localsetItem == null)
{
this.todos  = [];
}
else
{
this.todos=JSON.parse(this.localsetItem);
}
}
小开

试试这个

private userSubject$ = new BehaviorSubject<User | unknown>(null);
小开

我按照下面的方法解决了这个问题

router.navigateByUrl(returnUrl!);
小开

有什么想法吗:

export const useStateWithLocalStorage = (defaultValue: string[], key: string) => {
const [value, setValue] = useState(() => {
const storedValues = localStorage.getItem(key);


return storedValues !== null ? JSON.parse(storedValues) : defaultValue;
});


useEffect(() => {
localStorage.setItem(key, JSON.stringify(value));
}, [key, value]);


return [value, setValue];
};
小开

使用角度或 TS:-

JSON.parse(localStorage.getItem('user') as string);

或者

JSON.parse(localStorage.getItem('user') as any);

提交答案