Formik 'initialValues' React中的打字稿错误.js带有钩子

Question

我的react.js注册表工作正常，然后决定将Formik应用于它，并在两个问题上陷入困境：我一直从"Formik"标记中收到关于"initialValues"的TS错误消息。此外，在将"input"切换为"Field"标记后，onChange中的参数函数"e"也显示下划线ts错误。"ErrorMessage"标记中的样式属性存在相同问题
我只是想用一种简单的Formik方法来处理我的表格。有什么建议吗？

import React, { useState, FormEvent, useRef } from 'react';
import { Link, withRouter, useHistory } from 'react-router-dom';
import api from '../services/api';
import PrimaryButton from "../components/PrimaryButton";
import * as Yup from 'yup';
import { useForm } from 'react-hook-form';
import { Formik, Field, Form, ErrorMessage } from 'formik';

const userSchema = Yup.object().shape({
name: Yup.string().required('Nome obrigatório.').max(60),
email: Yup.string().required('Email obrigatório'),
password: Yup.string().required('Senha obrigatória').min(4, 'Ops, curta demais.').max(10, 'Ops, longa demais.'), 
})
function Register() {
const history = useHistory(); 
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [firstPassword, setFirstPassword] = useState('');  
const [password, setPassword] = useState('');  

const { register, handleSubmit, errors, getValues } = useForm();
// const inputPassword = useRef(null)
async function handleAddDev(e: FormEvent) {
// e.preventDefault();
let formData = {
name,
email,
password,  
}
const isValid = await userSchema.isValid(formData);
console.log(isValid);
const response = await api.post('/users/new', formData)   
console.log(response.data);
alert('Cadastro efetuado com sucesso.')
setName('');
setEmail('');
setFirstPassword('');
setPassword('');

history.push('/')
}    
const myValues = {
name: "",
email: "",
firstPassword: "",
password: "",
}

return (
<>       
<div id="register">          
<strong>Cadastrar Usuário</strong>
<Formik  
initialValues={myValues}
validationSchema={userSchema}
onSubmit={handleAddDev}>

<Form  >
<div className="input-block">
<label htmlFor="name">Nome</label>
<Field 
name="name" 
id="name" 
type="text"
placeholder= "Seu nome"
value={name}
onChange={e => setName(e.target.value)}
required />
<ErrorMessage 
name="name"
component="div"
className="invalid-feedback"
style={{ color:"red", fontWeight:"bold"}}/>
</div>

<div className="input-block">
<label htmlFor="email">E-mail</label>
<Field
name="email" 
id="email" 
type="email"
placeholder= "Seu email"
value={email}
onChange={e => setEmail(e.target.value)}
/>
<ErrorMessage 
name="email"
component="div"
className="invalid-feedback"
style={{ color:"red", fontWeight:"bold"}}/>
</div>
<div className="input-block">
<label htmlFor="email">Senha</label>
<Field
name="password" 
id="password" 
type="text"
placeholder= "Senha"
value={firstPassword}
onChange={e => setFirstPassword(e.target.value)}
ref={register}/>
<ErrorMessage 
name="password"
component="div"
className="invalid-feedback"
style={{ color:"red", fontWeight:"bold"}}/>
</div>
<div className="input-block">
<label htmlFor="email">Confirmar Senha</label>
<Field 
name="passwordConfirmation" 
id="password" 
type="text"
placeholder= "Confirme sua sehna"
ref={register({
validate: {
passwordEqual: value => (value === getValues().password) || 'Password confirmation error!',
}
})}                
value={password}
onChange={e => setPassword(e.target.value)}
required />
<ErrorMessage 
name="name"
component="div"
className="invalid-feedback"
style={{ color:"red", fontWeight:"bold"}}/>
{errors.passwordConfirmation && <p>{errors.passwordConfirmation.message}</p>}
</div>                 
<PrimaryButton type="submit">Cadastrar</PrimaryButton>  
</Form>

</Formik>
<button><Link to='/'></Link> </button>             

</div>   

</>
)
}
export default withRouter(Register);

Answer 1

如果您的文件扩展是tsx，则需要为表单值定义一个接口：

interface MyFormValues {
name: string,
email: string,
firstPassword: string,
password: string,
}
const myValues: MyFormValues = {
name: "",
email: "",
firstPassword: "",
password: "",
}

对于字段错误，值和onChange由甲酸处理，因此您不再需要它们。https://formik.org/docs/guides/typescript

Answer 2

const myValues = {
name: "",
email: "",
firstPassword: "",
password: "",
}

您没有字段名"firstPassword"。取而代之的是name="passwordConfirmation"。初始值必须与字段名称匹配。

关于第二个问题：

onChange = {(e: React.FormEvent<HTMLInputElement>)=>setFirstPassword(e.target.value)}