Typescript/React-Native:'string | 类型的参数 | null' 不可分配给类型为 'SetStateAction<never[]>' 的参数

时间:2021-05-11 03:59:50

标签: reactjs typescript react-native types asyncstorage

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

<块引用>

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

该应用程序正在显示价值,但我想了解如何解决问题。我想我必须为 type 分配一个 useState,但不知道如何分配 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;


谢谢。

1 个答案:

答案 0 :(得分:0)

使用 const [value,setValue] = useState<string | null>(''); 修复了@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>
  );
};


世界,你好!