React Formik 警告：组件正在将不受控制的输入更改为受控

Question

我正在使用 TypeScript 在 React 中创建一个相当简单的待办事项应用程序。

表格我用的是Formik。

我在输入字段中添加值时得到的错误是这样的

3973 Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component

根据我之前对该主题的谷歌搜索，我了解到问题很可能是因为 formik InitialValues

让我给你看一些代码

export interface textFieldProps {
    field: string;
    displayName: string;
}


import { ErrorMessage, Field } from "formik";
import { textFieldProps } from "../interfaces/UtilsProps.interface";

export const TextField = (props: textFieldProps) => {
  return (
    <div className="mb-3">
      <label htmlFor={props.field}>{props.displayName}</label>
      <Field name={props.field} id={props.field} className="form-control" />
      <ErrorMessage name={props.field}>
        {(msg) => <div className="text-danger">{msg}</div>}
      </ErrorMessage>
    </div>
  );
};

还有这个

export interface createTodoModel {
    todo: string;
    isComplete: boolean;
}

export interface TodoFormProps {
    model: createTodoModel;
    onSubmit(values: createTodoModel, action: FormikHelpers<createTodoModel>): void;
}

import { Form, Formik } from "formik"
import { TodoFormProps } from "../interfaces/TodoProps.interface"
import * as yup from 'yup'
import { TextField } from "../Utils/TextField"
import Button from "../Utils/Button"

export const TodoForm = (props: TodoFormProps) => {
    return(
        <Formik initialValues={props.model}
        onSubmit={props.onSubmit}
        validationSchema={yup.object({
            name: yup.string().max(50, 'max length is 50 characters').required('You must add an todo').firstLetterUpperCase()
        })}
        >
            {(FormikProps) => (
                <Form>
                    <TextField field='name' displayName='What do you need done?' />
                    <Button children='Add your todo' className='btn btn-outline-primary' disabled={FormikProps.isSubmitting} />
                </Form>
            )}

        </Formik>
    )
}

还有这个

import { TodoForm } from "../components/Todos/TodoForm"

export const TodoView = () => {
    return(
        <article>
            <TodoForm model={{todo: "", isComplete: false}}
            onSubmit={async value => {
                await new Promise(r => setTimeout(r, 1000));
                console.log(value)
            }}/>
        </article>
    )
}

然而，我在谷歌搜索中没有任何运气。

你知道这个问题的解决方案吗？如果是这样，我将不胜感激！

谢谢！

Answer 1

您将道具模式作为 model={{todo: "", isComplete: false}} 传递，这是一个包含这些值名称的对象，不包括在内，然后您将这些传递给 formik 初始值，因此对象不包含名称值，这意味着它未定义，这就是为什么你得到错误

而不是将 props.model 传递给 <Formik initialValues={props.model}>，您需要传递 <Formik initialValues={{name: ''}}>

如果这有助于某些校准，请告诉我这是最有可能解决您遇到的错误的解决方案

Answer 2

我改了这个

export interface createTodoModel {
    todo: string;
    isComplete: boolean;
}

进入这个

export interface createTodoModel {
        name: string;
        isComplete: boolean;
    }

现在可以使用了

React Formik 警告：组件正在将不受控制的输入更改为受控

React Formik Warning: A component is changing an uncontrolled input to be controlled

typescript

reactjs

tsx

formik

react-typescript