0
156
VistasJson Array empuja los datos dos veces al árbol de archivos con React
Al insertar datos en un árbol de archivos, se insertan 2 conjuntos de los mismos datos y no estoy exactamente seguro de por qué.
Tengo una matriz json simple que se ve así:
export const treeDataFile = [{ type: 'directory', name: '2022', }] export default treeDataFile;Estoy tratando de insertar 4 archivos que tengo así llamando a esta función:
const addFileToTree = (file,i) => { treeDataFile.push({type: i, name: file}); console.log(treeDataFile) setFirstRender(true); };Así es como se llama a addFileToTree:
const [files, setFiles] = useState([]); //AWS Setup useEffect(() => { Amplify.configure({ Auth:{ identityPoolId: '', region: 'us-east-1', }, Storage: { AWSS3: { bucket:'', region: 'ca-central-1', } } }); },[]); //gets all files in the bucket useEffect(() => { Storage.list('').then(files => { const s3_files = setFiles(files); s3_files.replace("\"eTag\":", "\"perfect\":"); console.log(s3_files); }).catch(err => { console.log(err); }); },[]); return ( <div classname="container"> <GeistProvider> <CssBaseline /> <Tree style={{width:"280px", height: "500"}} value={treeDataFile} onClick={handleShow} /> </GeistProvider> <table> <tbody> {files.map((file,i) => ( <tr key={file.key}> {addFileToTree(file.key,i)} </tr> ))} </tbody> </table> </div> ); };El resultado ha sido este, solo debe haber 4 elementos, pero lo ha duplicado.
Cualquier ayuda sería muy apreciada.
1 Respuestas
Responde la pregunta0
Estás mutando el treeDataFile global como un efecto secundario de la función de tu componente (e incluso "peor", como un efecto secundario de un render .map() ). Entre otras cosas, esto haría que treeDataFile creciera más y más cada vez que se actualiza su componente.
Probablemente también esté utilizando StrictMode de React , que, para empezar, procesa dos veces sus componentes para asegurarse de que no está haciendo nada tonto, como lo está haciendo ahora.
Si su objetivo es derivar un treeDataFile para ese componente de tree basado en el treeDataFile global y los files , puede hacerlo con useMemo , que es un enlace diseñado para derivar nuevos datos en función de otros datos; en este caso, su treeDataFile "base" y los files que obtiene. (Supongo que son accesorios, ya que no apareces. También podrían ser estatales, por supuesto).
Eliminé la tabla de este componente, ya que no tenía ningún contenido real basado en el código original que tenía.
EDITAR: según el código aumentado en la pregunta, los tipos esperados para todo se vuelven un poco más claros. Por un lado, ahora está claro que los files son una matriz de archivos de AWS Amplify S3 y que estamos usando el componente Geist's Tree. Puede encontrar un ejemplo funcional completo en TypeScript (sin AWS Amplify, pero con sus tipos) en este CodeSandbox .
const treeDataFile = [{ type: "directory", name: '2022', }]; export default function App() { const [files, setFiles] = React.useState([]); React.useEffect(() => { // Load files via AWS Amplify. Storage.list('').then(setFiles); }, []); const treeWithFiles = React.useMemo(() => { const tree = [...treeDataFiles]; // shallow-copy (files || []).forEach((file, i) => { tree.push({ type: "file", name: String(file.key) }); }); return tree; }, [files]); return ( <div className="container"> <GeistProvider> <CssBaseline /> <Tree style={{ width: "280px", height: "500" }} value={treeWithFiles} /> </GeistProvider> </div> ); }