从AsyncStorage呈现数据时，无法读取Undefined“的属性”map“

Question

我正试图通过从AsyncStorage获取值来呈现数据数组。但首先调用render，并在我试图映射数组时显示未定义的映射。代码如下：

null

const [myCosts, setMyCosts] = useState([]);

    useEffect(() => {
        console.log('useeffect')
        readData();
      }, [])

      
const readData = async () => {
        try {
          const expenseValue =  await AsyncStorage.getItem('COSTLIST')
          setMyCosts(expenseValue);
       
        } catch (e) {
          alert('Failed to fetch the data from storage')
        }
      }
if (myCosts === []) {
  return (
    <View style={styles.activityIndicatorContainer}>
      <ActivityIndicator animating={true}/>
    </View>
  );
} else {
 return(
  <View>
  {myCosts.map(cost => {
       return (
          <Text style={{backgroundColor:'#f2e3df',color:'#000',padding:10}}>
             {cost.name}
           </Text>
        )
  })
  }
  </View>
 )
}

null

我也加了条件。但它仍然给出了错误。还能做什么？




Answer 1

当你可以做这样的事情时，为什么你要设置状态；useState set方法是一个异步调用，它可能不会立即反映更改

let myCosts = [];

useEffect(() => {
    readData();
}, [])
      
const readData = async () => {
        try {
          myCosts =  await AsyncStorage.getItem('COSTLIST') || [];
        } catch (e) {
          alert('Failed to fetch the data from storage')
        }
}

if (myCosts.length) {
  return (
    <View style={styles.activityIndicatorContainer}>
      <ActivityIndicator animating={true}/>
    </View>
  );
} else {
 return(
  <View>
  {myCosts.map(cost => {
       return (
          <Text style={{backgroundColor:'#f2e3df',color:'#000',padding:10}}>
             {cost.name}
           </Text>
        )
  })
  }
  </View>
 )
}

Answer 2

在将AsyncStorage设置为State之前，您需要确保它不为空。

这应该可以帮助您修复错误。

const expenseValue =  await AsyncStorage.getItem('COSTLIST')

setMyCosts(expenseValue || []);

但是，您希望确保在AsyncStorage中正确设置了CostList以便它不会返回undefined