【问题标题】:Typescript/React-Native: Argument of type 'string | null' is not assignable to parameter of type 'SetStateAction<never[]>'Typescript/React-Native:'string | 类型的参数null' 不可分配给“SetStateAction<never[]>”类型的参数
【发布时间】:2021-08-01 10:40:02
【问题描述】:

我正在学习 typescriptReact-Native,我想使用 AsyncStorage 库。从存储读取值后设置状态时,我遇到了这个问题:

常量值:字符串 | null 'string | 类型的参数空'不是 可分配给“SetStateAction”类型的参数。类型 'null' 不可分配给类型 'SetStateAction'

应用程序正在显示价值,但我想学习如何解决问题。我想我必须为useState分配一个type,但不知道如何分配SetStateAction类型。

如何设置类型为useState来解决这个问题?

这是示例代码:

import React, {useEffect, useState} from 'react';
import {Text, View} from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

const App = () => {
  const [value, setValue] = useState([]);
  
  async function saveValue(key: string, value: string) {
    await AsyncStorage.setItem(key, value);
  }
  
  async function readValue(key: string) {
    const value = await AsyncStorage.getItem(key);
    setValue(value);
  }

  useEffect(() => {
    saveValue('123', 'Hello world! ');
    readValue('123');
  }, []);

  return (
    <View>
      <Text>{value}</Text>
    </View>
  );
};

export default App;


谢谢。

【问题讨论】:

  • 试试useState&lt;string[]&gt;([])
  • @MicFung 它没有改变问题
  • 你确定状态value的初始值是一个空数组吗?
  • 问题是 AsyncStorage.getItem(key) 返回字符串或 null,并且它与 never[] 或 string[] 都不兼容。正如@Viet 提到的,您可能会考虑更改您的类型或告诉我们使用数组的用例
  • 如果您的状态是从异步存储const [value, setValue] = useState&lt;string | null&gt;(''); 存储值(字符串或空值)应该是您所需要的

标签: reactjs typescript react-native types asyncstorage


【解决方案1】:

使用const [value,setValue] = useState&lt;string | null&gt;(''); 解决了@Mic Fung 建议的问题。这是生成的代码:

const App = () => {
  const [value, setValue] = useState<string | null>('');
    
async function saveValue(key: string, value: string) {
    await AsyncStorage.setItem(key, value);
  }

async function readValue(key: string) {
    const value = await AsyncStorage.getItem(key);
    setValue(value);
  }

  useEffect(() => {
    saveValue('123', 'Hello world! ');
    readValue('123');
  }, []);

  return (
    <View>
      <Text>{value}</Text>
    </View>
  );
};


世界你好!

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2021-07-21
    • 2021-07-14
    • 2021-10-03
    • 1970-01-01
    • 1970-01-01
    • 2020-04-17
    • 2022-08-24
    • 1970-01-01
    相关资源
    最近更新 更多