與array.map奇怪的輸出

Question

我正在構建一個簡單的React Native移動應用程序，並從AsyncStorage獲取數據。 這是一個在組件安裝時獲取數據的函數

  getClassData = async id => {
    const allRegs = (await AsyncStorage.getItem("regs")) || "[]";
    const items = JSON.parse(allRegs);
    console.log("All REGS", items);
    const classData = items.map((y, i) => (
    <View key={i}>
     <Text>{y.email}, {y.name}</Text>
      </View>
    ));
    console.log('ALL DATA',str)
  };

第一個輸出是正常的，看起來像這樣。

All REGS
   Array [
     Object {
       "classID": 1,
        "email": "Mp@fgh.com",
        "name": "Allen",
          },
       ]

但是在控制台中輸出的地圖功能之后是這個

所有數據

  Array [
   Object {
   "$$typeof": Symbol(react.element),
   "_owner": null,
   "key": "0",
   "props": Object {
     "children": Object {
    "$$typeof": Symbol(react.element),
    "_owner": null,
    "key": null,
    "props": Object {
    ......

為什么這不只是給我期望的輸出（只是一個簡單的輸出，其中包含視圖和文本中的數據？）。

Answer 1

AsyncStorage返回一個承諾。 准備好后.then()您需要調用.then()以獲取值。

getClassData = async id => {
    await AsyncStorage.getItem("regs").then((allRegs) => {
        const items = JSON.parse(allRegs);
        console.log("All REGS", items);
        const classData = items.map((y, i) => {
            return(
                <View key={i}>
                    <Text>{y.email}{y.name}</Text>
                </View>
            );
        });
        console.log('ALL DATA', str);
    });
};

Answer 2

const items = [
       {
       name:'aaaa',
       email:'aaaa@gmail.com'
        },
       {
       name:<View>aksjdha</View>,
       email:'bbbb@gmail.com'
        },
       <View>qwds</View>
     ]


    let classData = items.map((y, i) => (
    <View key={i}>
     <Text>{y.email}, {y.name}</Text>
      </View>
    ));

您的數組對象中有類似jsx的內容，請檢查一次。