I am right now trying to create a form where all of the data will be sent to an excel. I found this code snippet, and it did work as pasted, but as soon as I got my own data into it it stopped working with the errors:"Possible unhandled promise rejection id: 2" (got even id 0 and 1 also)TypeError: js.forEach is not a function (it is undefined)
Here is my code:
import { useForm, Controller } from "react-hook-form";import XLSX from "xlsx";import * as FileSystem from "expo-file-system";import * as Sharing from "expo-sharing";import { ImageBackground, StyleSheet, Text, View, Button, TextInput,} from "react-native";function FormScreen({ route, navigation }) { const { control, handleSubmit } = useForm(); async function onSubmit(data) { console.log(data); // Work with the form dat var ws = XLSX.utils.json_to_sheet(data); var wb = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb, ws, "Cities"); const wbout = XLSX.write(wb, { type: "base64", bookType: "xlsx", }); const uri = FileSystem.cacheDirectory +"form.xlsx"; console.log(`Writing to ${JSON.stringify(uri)} with text: ${wbout}`); await FileSystem.writeAsStringAsync(uri, wbout, { encoding: FileSystem.EncodingType.Base64, }); await Sharing.shareAsync(uri, { mimeType:"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", dialogTitle: "MyWater data", UTI: "com.microsoft.excel.xlsx", }); } return (<ImageBackground source={require("../assets/images/htmlbg.jpg")} style={styles.background}><View style={styles.formContainerTitle}><Text style={styles.formTitle}>Stay in touch!</Text></View><View style={styles.formContainer}><Controller control={control} name="Name" render={({ field }) => (<TextInput {...field} onChangeText={field.onChange} style={styles.formInput} placeholder="Name" //Can add other TextInput props /> )} /><Controller control={control} name="Company Name" render={({ field }) => (<TextInput {...field} onChangeText={field.onChange} style={styles.formInput} placeholder="Company Name" //Can add other TextInput props /> )} /><Controller control={control} name="Email" render={({ field }) => (<TextInput {...field} onChangeText={field.onChange} style={styles.formInput} placeholder="Email" //Can add other TextInput props /> )} /><Controller control={control} name="Phone Number" render={({ field }) => (<TextInput {...field} onChangeText={field.onChange} style={styles.formInput} placeholder="Phone Number" //Can add other TextInput props /> )} /><Button style={styles.formButton} title="Submit" color="white" onPress={handleSubmit(onSubmit)} /></View></ImageBackground> );}export default FormScreen;You may notice that aside from the copy pasted text I also added "async" behind the function, that is because I would get 2 syntax errors from those 2 await functions and adding async there seemed to do the trick. I am not sure if that makes the problem worse.
I have tried using the data var provided in the snippet and everything works properly. As soon as I remove that and I use the data from the form it doesn't like. It doesn't cross the var ws line. It is seemingly getting stuck at that point.In terms of my form it does function normally. The console log at the top of the function works (even though it logs the fiels in the wrong order, it's 2 - 3 - 1 - 4 instead of 1 - 2 - 3 - 4)
Thank you in advance for all the help