Hice una entrada de archivo personalizada en mi aplicación. Funciona de maravilla, pero cuando se carga el archivo, la entrada del archivo personalizado sigue mostrando el nombre del archivo, lo cual es un problema.

Traté de pasar un estado del componente principal para restablecer el nombre que se muestra pero, por alguna razón, el accesorio secundario no se actualiza con el estado principal y no sé por qué.

Aquí está la entrada del archivo personalizado:

 export default function CustomInput({ disabler, setUpperLevelFile, previousName, typeOfFiles, lastInput, reset, }) { const [fileUpload, setFileUpload] = useState(null); useEffect(() => { if (lastInput) { setUpperLevelFile && setUpperLevelFile(fileUpload, lastInput); } else { setUpperLevelFile && setUpperLevelFile(fileUpload); } }, [fileUpload]); useEffect(() => { reset && setFileUpload(null); console.log("custom input use effect : ", reset); }, [reset]); return ( <label className="customInputLabel"> <CustomButton buttonInnerText="browse" /> <p> {(fileUpload && `${fileUpload.name}, (${sumParser(fileUpload.size)})`) || (previousName && previousName) || "chose a file"} </p> <input type="file" name="realInput" className="innerFileInput" accept={typeOfFiles && typeOfFiles} disabled={disabler && !disabler} style={{ display: "none" }} onChange={(e) => { setFileUpload(e.target.files[0]); }} /> </label> ); }

Y aquí está algo del código principal:

 export default function ImportFiles(props){ ... const [resetInputs, setResetInputs] = useState(false); const returningInputs = () => { let stockInputs = []; for (let i = 0; i < filesCounter; i++) { stockInputs.push( <CustomInput key={`custom input ${i}`} setUpperLevelFile={handlingInputChange} lastInput={i === filesCounter - 1} reset={resetInputs} /> ); } setFilesInputs(stockInputs); }; const handlingPostingFiles = () => { postingFiles(uploadFiles, setUploadStatus); setResetInputs(true); }; useEffect(() => { console.log("edit packages use effect : ", resetInputs); }, [resetInputs]); ... return( ... {filesInputs} ... )

El componente principal console.log muestra que el estado se actualiza, pero el de CustomInput no se activa después del primer procesamiento. Entonces no está actualizado.