This is my code for a form in React Native which is where i seem to be getting the error. I'm confused as this renders perfectly fine in my web simulator (expo): working form but I get this error when I use ios simulator. I don't have any conditional logic or spaces/semicolons(at least what i can find) so not sure why I'm getting this error, also i'm using material ui core for my text fields in my form (which is where the error is supposedly coming from if you ref the image above). Any help would be appreciated!! pls help
import React, { useRef, useState } from 'react' import { StyleSheet, View, Text, Modal } from 'react-native'; import { Formik, Form, FieldArray } from 'formik'; import { makeStyles } from '@material-ui/core/styles'; import { Button, TextField } from "@material-ui/core"; import { recipeService } from '../services/RecipeService'; const useStyles = makeStyles((theme) => ({ root: { display: 'flex', flexWrap: 'wrap', }, textField: { marginLeft: theme.spacing(1), marginRight: theme.spacing(1), marginTop: theme.spacing(1), }, })); export default function NewRecipe({ route }) { const [showAlert, setShowAlert] = useState(false); const { userId } = route.params; const instructions = ['']; const ingredients = [{ name: '', amount: '', optional: false }]; const classes = useStyles(); const input = useRef(); return ( <View style={styles.container}> <Formik initialValues= onSubmit={(values, actions) => { recipeService.createRecipe(values).then( (response) => { console.log(response); setShowAlert(true); console.log("alert = " + showAlert); actions.resetForm({}); return ( <Modal animationType="slide" transparent={false} visible={true} onRequestClose={ () => { setShowAlert(false); } }> <View style={styles.modalView}> <Text>Recipe saved!</Text> <Button margin="normal" type="button" variant="contained" color="default" className={classes.textField} onClick={() => actions.resetForm({})} > New Recipe </Button> </View> </Modal> ) } ) .catch((error) => { console.log(error); }); } } >{({ values, handleChange, handleBlur }) => ( <Form> <TextField fullWidth variant="outlined" id="name" name="name" label="Name" value={values.name} onChange={handleChange} /> <TextField fullWidth multiline variant="outlined" id="summary" name="summary" label="Summary" className={classes.textField} value={values.summary} onChange={handleChange} /> <View style={styles.row}> <FieldArray name="ingredients" render={arrayHelpers => ( <div> {values.ingredients.map((item, index) => ( <div key={index}> <TextField variant="outlined" label="Ingredient Name" name={`ingredients.${index}.name`} value={item.name} margin="normal" className={classes.textField} onChange={handleChange} style= onBlur={handleBlur} /> <TextField variant="outlined" label="Amount" name={`ingredients.${index}.amount`} value={item.amount} margin="normal" className={classes.textField} onChange={handleChange} style= onBlur={handleBlur} /> <Button margin="normal" type="button" color="secondary" variant="outlined" margin="dense" style= className={classes.textField} onClick={() => arrayHelpers.remove(index)} > x </Button> <Button margin="normal" type="button" variant="contained" color="default" className={classes.textField} onClick={() => arrayHelpers.push({ name: '', amount: '', optional: false })} >Add </Button> </div> ))} </div> )} /> </View> <FieldArray name="instructions" render={arrayHelpers => ( <div> {values.instructions.map((item, index) => ( <div key={index}> <TextField variant="outlined" label="Instruction" name={`instructions.${index}`} value={item} margin="normal" className={classes.textField} onChange={handleChange} style= onBlur={handleBlur} /> <Button margin="normal" type="button" color="secondary" variant="outlined" margin="dense" style= className={classes.textField} onClick={() => arrayHelpers.remove(index)} > x </Button> </div> ))} <Button margin="normal" type="button" variant="contained" color="default" className={classes.textField} onClick={() => arrayHelpers.push('')} >Add </Button> </div> )} /> <div> <Button color="primary" variant="contained" className={classes.textField} fullWidth type="submit"> Submit </Button> </div> </Form> )} </Formik> 
没有评论:
发表评论