0
218
Vistasreaccionar: no se puede establecer el valor para el cuadro de entrada
Estoy haciendo 2 entradas otp en mi aplicación.
En Input.tsx , estoy usando react-otp-input para la funcionalidad otp
si
<OtpInput value={"abcde"} ... numInputs={5} /> La interfaz de usuario de react-otp-input será
Ahora el problema es que cuando trato de cambiar el valor de otp, arroja un error
Cannot set properties of undefined (setting 'value') ¿Cómo puedo arreglarlo?
Entrada.tsx
import React, { useState } from "react"; import OtpInput from "react-otp-input"; type InputPropType = { value: string; setValue: (event: string) => void; }; function Input(props: InputPropType): JSX.Element { const { value, setValue } = props; return ( <OtpInput value={value} onChange={(e: string) => { setValue(e); }} numInputs={5} /> ); } export default Input;Aplicación.tsx
import React, { useState } from "react"; import Input from "./Input"; export default function App() { type InputValueType = { id: number; value: string; }; const [inputValues, setInputValues] = useState<Array<InputValueType>>([ { id: 0, value: "" }, { id: 1, value: "" } ]); const InputGroup = () => { let numOfInputs: number = 2; var rows: Array<any> = []; for (var i = 0; i < numOfInputs; i++) { let inputValue: InputValueType = inputValues[i]; rows.push( <Input key={inputValue.id} value={inputValue.value} setValue={(event: string) => { let inputValuesTemp = inputValues; inputValuesTemp[i]["value"] = event; setInputValues(inputValuesTemp); }} /> ); } return <>{rows}</>; }; return ( <div className="App"> <InputGroup /> </div> ); } codigosandbox
https://codesandbox.io/s/react-typescript-forked-s38ck9?file=/src/App.tsx:0-918
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Pocas cosas por corregir,
- Hay un problema con los cierres en su ciclo for ya que usó
varen lugar delet. Todas las variablesise refieren al mismo cierre de bucle for en el bucle for, lo que significa queies2al final de la iteración. Todos losinputValuesTemp[i]ahora se resuelven eninputValuesTemp[2]que definitivamente no estáundefined.
Reemplace var con let para crear cierres para cada iteración del bucle.
for (let i = 0; i < numOfInputs; i++) {...}- Y también necesita obtener una copia de la matriz de valores para reaccionar para hacer una nueva representación (para informar que la matriz ha cambiado).
let inputValuesTemp = [...inputValues];- Su componente
InputGroupestaba dentro del componenteApp, lo que provocó que perdiera el enfoque con cada pulsación de tecla. Para solucionar el problema de enfoque, mueva elInputGroupfuera de laAppy manténgalo como un componente separado.
import React, { useState } from "react"; import Input from "./Input"; type InputValueType = { id: number; value: string; }; const InputGroup = () => { const [inputValues, setInputValues] = useState<Array<InputValueType>>([ { id: 0, value: "" }, { id: 1, value: "" } ]); let numOfInputs: number = 2; var rows: Array<any> = []; for (let i = 0; i < numOfInputs; i++) { let inputValue: InputValueType = inputValues[i]; rows.push( <Input key={inputValue.id} value={inputValue.value} setValue={(event: string) => { let inputValuesTemp = [...inputValues]; inputValuesTemp[i]["value"] = event; setInputValues(inputValuesTemp); }} /> ); } return <>{rows}</>; }; export default function App() { return ( <div className="App"> <InputGroup /> </div> ); } 
·
Juan Pablo Isaza
Denunciar
Responde la pregunta