javascript - 反应原生不变违规：文本字符串必须在<text>表单中的组件（TextField）</text>

问题描述

这是我在 React Native 中的表单代码，这似乎是我遇到错误的地方。我很困惑，因为这在我的网络模拟器（博览会）中表现得非常好：工作形式，但是当我使用 ios 模拟器时出现此错误。我没有任何条件逻辑或空格/分号（至少我能找到）所以不知道为什么我会收到这个错误，我也在我的表单中的文本字段中使用材料 ui 核心（这是如果您参考上面的图像，错误应该来自）。任何帮助，将不胜感激！！请帮忙
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>
标签： javascriptreactjsreact-native
javascript - 反应原生不变违规：文本字符串必须在表单中的组件（TextField）

问题描述

解决方案

推荐阅读
