清除Submit上的单选按钮而不出现错误

Question

我想清除单选按钮值而不会在NextJS中获得react的错误，我确实设法在其他字段中这样做，如下面的例子…

<div className="col-md-6">
<label className="col-md-12 control-label"><strong>Ciudad de residencia</strong></label>
<div className="inputGroupContainer mx-auto">
<div className="input-group input-group-dynamic mb-4">
<span className="input-group input-group-dynamic mb-4-addon"><i className="glyphicon glyphicon-user"></i></span>
<input {...register('city', { required: true, pattern: /^[A-Za-z]+$/i })} placeholder="Ciudad" className="form-control" type="text" value={city} onChange={e => setCity(e.target.value) }/>
</div>
</div>
{errors.city && <span>Ingrese Ciudad de residencia</span>}
</div>

但是在单选按钮中，我无法设法清除它们，尝试了几种方法，但setChecked返回以下错误

错误:无效钩子调用。钩子只能在函数组件的内部调用。

我的代码在下面，所以你可以看到一些例子，它不是完整的代码，只有这样你才能看到我是如何在函数中使用(")清理其他字段的，但在无线电中我不能这样做，因为它是一个变量…希望你能帮我。谢谢。

const [nombre, setNombre] = useState('')
const [dni, setDNI] = useState('')
const [email, setEmail] = useState('')
const [city, setCity] = useState('')
const [area, setArea] = useState('')
const [capacitacion, setCapacitacion] = useState('')
const [impacto, setImpacto] = useState('')
const [{checkedNo, checkedSi}, setChecked] = useState('')
async function onSubmit(e) {
axios.post('http://localhost:3000', {
data: {
Nombre: nombre,
DNI: dni,
Correo: email,
Ciudad: city,
Sector: sector,
Area: area,
OSC: seleccion,
Capacitacion: capacitacion,
Impacto: impacto
}
})
.then(response => {
console.log(response);
setShowMe(!showMe);
setNombre('')
setEmail('')
setDNI('')
setCity('')
setArea('')
setSector('')
setOSC('')
useState({ setChecked: false })
});

}

更新代码:

<div className="selectContainer mx-auto">
<label className="col-md-12 control-label"><strong>¿Finalizó el Curso de Capacitación virtual?</strong></label>
<div className="form-check">
<input {...register("capacitacion", { required: true })} value="no" className="form-check-input" type="radio" name="capacitacion" id="no" checked={checked} onChange={e => setCapacitacion(e.target.value)} onClick={e => setChecked(e.target.value)} />
<label className="form-check-label" htmlFor="no">
No
</label>
</div>
<div className="form-check">
<input {...register("capacitacion", { required: true })} value="si" className="form-check-input" type="radio" name="capacitacion" id="si" checked={checked} onChange={e => setCapacitacion(e.target.value)} onClick={e => setChecked(e.target.value)} />
<label className="form-check-label" htmlFor="si">
Sí
</label>
</div>
{errors.capacitacion && <span>Seleccione una opción</span>}
</div>

解决:

在我的HTML中，值必须匹配选中的变量…像这样。我真的很想念它。由于

value="Si" className="form-check-input" type="radio" name="capacitacion" id="si" checked={checked === 'Si'}

Answer 1

错误告诉您哪里出错了。你不能在条件或函数中声明钩子，就像你在.then回调中所做的那样(删除这个:useState({ setChecked: false }))。它必须在组件的根目录下声明:

function MyComponent(){
// declare your useState hook here
const [checked, setChecked] = useState(false)

async function handleSubmit(){
axios.post('http://localhost:3000').then(() => {
// call setState method from useState
setChecked(false)
})
}
}