獲取“物件作為React子級無效”，我使用陣列來呈現子級集合，但它仍然無法正常作業

正如標題所說，我在呼叫以下函式時遇到了這個問題

const CustomAgenda = () => {
  return <ScrollView>{returnArray()}</ScrollView>;
};

它正在呼叫 returnArray 函式

const returnArray = async () => {
  let set = [];
  console.log(6);
  await getJobs().then(() => {
    console.log(7);
    set = j.map(x => {
      return (
        <View>
          <Text> {x.itemType} </Text>
        </View>
      );
    });
  });
  await console.log(set);
};

最后，這個console.log如下-應該是什么，但我仍然遇到同樣的錯誤

[<View><Text> Carerre </Text></View>, <View><Text> Car </Text></View>, <View><Text> Car </Text></View>, <View><Text> Car </Text></View>, <View><Text> Car </Text></View>]

我相信錯誤可能位于接下來的兩個函式中

下面的函式從資料庫中獲取作業 UID，然后呼叫 getJobData 函式回傳每個作業的資訊

async function getJobs() {
  console.log(8);
  await firestore()
    .collection('Users')
    .doc(global.uid)
    .get()
    .then(async documentSnapshot => {
      console.log(9);
      console.log(10);
      await getJobData(documentSnapshot.get('jobs'));
    });
}

getJobData 函式將回傳的資料推送到名為“j”的全域陣列中

const getJobData = async jobList => {
  for (const i of jobList) {
    let item = {};

    await firestore()
      .collection('Jobs')
      .doc(i)
      .get()
      .then(documentSnapshot => {
        item.id = i;
        item.itemType = documentSnapshot.get('itemType');
        item.size = documentSnapshot.get('size');
        item.type = 'Pickup';
      })
      .then(() => {
        j.push(item);
      });
  }
};

'j' 陣列回傳以下 - 這也是正確的。

[{"id": "fST5A2WzgUR66xxNdHAU", "itemType": "Carerre", "size": "Large", "type": "Pickup"}, {"id": "cKQLGqqtyyuxhO7ZuFLR", "itemType": "Car", "size": "Large", "type": "Pickup"}, {"id": "l3KCfGSKh3MCySje832f", "itemType": "Car", "size": "Large", "type": "Pickup"}, {"id": "B8byNmHdc6g5YGqTPovX", "itemType": "Car", "size": "Large", "type": "Pickup"}, {"id": "FQraUtV7uTDyvkux1Vkf", "itemType": "Car", "size": "Large", "type": "Pickup"}]

記錄數字后，似乎是呼叫 getJobs，因為日志按此順序發生 - 6 - 錯誤 - 8 9 10 7

提前感謝您的任何幫助

uj5u.com熱心網友回復：

您需要回傳set。returnArray但這無論如何都無關緊要。無論如何，您還需要將結果存盤在狀態中（資料，而不是組件）。您正在嘗試做出承諾，但這是行不通的 - 并且是錯誤的最終原因。您需要等待資料，然后將其存盤在狀態中，這將觸發渲染。

與此returnArray 無關。

嘗試這個：

const CustomAgenda = () => {
  const [data, setData] = useState([])

  useEffect(() => {
      getJobs().then(data => setData(data))
  }, [])

  return <ScrollView>{
            data.map(x=> (
              <View>
                <Text> {x.itemType} </Text>
              </View>
            )}
         </ScrollView>;
};

uj5u.com熱心網友回復：

您不小心將任何內容回傳給您的 JSX，更正后的函式：

const returnArray = async () => {
  let set = [];
  console.log(6);
  await getJobs().then(() => {
    console.log(7);
    set = j.map(x => {
      return (
        <View>
          <Text> {x.itemType} </Text>
        </View>
      );
    });
  });
  await console.log(set);
return set
};

uj5u.com熱心網友回復：

函式名稱是returnArray，但在您的代碼中，該函式不回傳任何內容。出現錯誤是因為您將 JSX 元素內的函式用作子元素，并且此函式不回傳陣列，因為 JSX 元素也只允許陣列作為其中的資料。嘗試在您的函式中回傳陣列。

const returnArray = async () => {
  let set = [];
  console.log(6);
  await getJobs().then(() => {
    console.log(7);
    set = j.map(x => {
      return (
        <View>
          <Text> {x.itemType} </Text>
        </View>
      );
    });
  });
  await console.log(set);
  return set;
};

標籤：节点.js反应反应式

上一篇：如何使Firebase影像路徑在ReactNative上的不同設備上作為影像作業？

下一篇：通過id獲取資料，然后將其存盤在狀態中