Getting "Objects are not valid as a React child" , im using an array to render a collectio-CodePudding

As the title says, i am getting this issue when calling the below function

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

It is calling the returnArray function

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);
};

At the end this console.log's the following - Which is what it should be, but im still getting that same error

[<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>]

I believe the error could be located in these next two functions

The below function gets job UID from a database, then calls the getJobData function to return the information from each job

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'));
    });
}

The getJobData function pushes the returned data to a global array named '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);
      });
  }
};

The 'j' array returns the following - which is also correct.

[{"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"}]

After logging numbers, it seems to be the calling of getJobs, as the logs happen in this order - 6 - error - 8 9 10 7

Thankyou in advanced for any help

CodePudding user response：

You need to return set in returnArray. But that wont matter anyway. You also need to store the result in state anyway (of the data, not the components). You are trying to render a promise, which wont work -- and is the ultimate cause of the error. You need to wait for the data, then store that in state, which will trigger a render.

The returnArray becomes unnecessary with this.

Try this

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

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

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

CodePudding user response：

You accidentally return nothing to your JSX, the corrected function:

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
};