Javascript 反应本机不变冲突：文本字符串必须在<；文本>；表单中的组件（文本字段）
这是我在React Native中为表单编写的代码，这似乎是我遇到错误的地方。我很困惑，因为这在我的web模拟器（expo）中呈现得非常好： 但我明白了。我没有任何条件逻辑或空格/分号（至少我能找到），因此不确定为什么会出现此错误，而且我在表单中的文本字段中使用了material ui core（如果您参考上面的图像，则错误可能来自于此）。任何帮助都将不胜感激！！请帮忙Javascript 反应本机不变冲突：文本字符串必须在<；文本>；表单中的组件（文本字段）,javascript,reactjs,react-native,Javascript,Reactjs,React Native,这是我在React Native中为表单编写的代码，这似乎是我遇到错误的地方。我很困惑，因为这在我的web模拟器（expo）中呈现得非常好： 但我明白了。我没有任何条件逻辑或空格/分号（至少我能找到），因此不确定为什么会出现此错误，而且我在表单中的文本字段中使用了material ui core（如果您参考上面的图像，则错误可能来自于此）。任何帮助都将不胜感激！！请帮忙 import React, { useRef, useState } from 'react' import { StyleS
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={{ userId: userId, name: "", summary: "", instructions: instructions, ingredients: ingredients }}
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={{ margin: 8, width: 233 }}
onBlur={handleBlur}
/>
<TextField
variant="outlined"
label="Amount"
name={`ingredients.${index}.amount`}
value={item.amount}
margin="normal"
className={classes.textField}
onChange={handleChange}
style={{ margin: 8, width: 100 }}
onBlur={handleBlur}
/>
<Button
margin="normal"
type="button"
color="secondary"
variant="outlined"
margin="dense"
style={{ margin: 8, width: 30 }}
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={{ margin: 8, width: 350 }}
onBlur={handleBlur}
/>
<Button
margin="normal"
type="button"
color="secondary"
variant="outlined"
margin="dense"
style={{ margin: 8, width: 30 }}
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>
import React，{useRef，useState}来自“React”
从“react native”导入{样式表、视图、文本、模式}；
从'Formik'导入{Formik，Form，FieldArray}；
从'@material ui/core/styles'导入{makeStyles}；
从“@material ui/core”导入{Button，TextField}”；
从“../services/recipeService”导入{recipeService}；
const useStyles=makeStyles（（主题）=>({
根目录：{
显示：“flex”，
flexWrap:“wrap”，
},
文本字段：{
边缘左侧：主题。间距（1），
边缘光：主题。间距（1），
marginTop：主题。间距（1），
},
}));
导出默认函数NewRecipe（{route}）{
const[showAlert，setShowAlert]=useState（false）；
const{userId}=route.params；
常量指令=['']；
常量成分=[{name:''，amount:''，可选：false}]；
const classes=useStyles（）；
const input=useRef（）；
返回(
{
createRecipe（值），然后(
（回应）=>{
控制台日志（响应）；
设置ShowAlert（真）；
console.log（“alert=“+showAlert”）；
actions.resetForm（{}）；
返回(
{setShowAlert（false）；}
}>
食谱保存！
actions.resetForm（{}）}
>
新配方
)
}
)
.catch（（错误）=>{
console.log（错误）；
});
}
}
>{（{values，handleChange，handleBlur}）=>(
(
{values.components.map（（项目，索引）=>(
arrayHelpers.remove（索引）}
>x
arrayHelpers.push（{name:''，amount:''，可选：false}）
>加
))}
)}
/>
(
{values.instructions.map（（项，索引）=>(
arrayHelpers.remove（索引）}
>x
))}
arrayHelpers.push（“”）}
>加
)}
/>
提交
)}
@material ui/core@material ui/core我想推荐替代品，但我不使用React Native的材质设计，因为它根本不适合iOS。啊……这就解释了lol。非常感谢！