• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

268
Views
Cuando usa useState con un argumento de matriz, ¿cómo usa useEffect para actualizar un botón dinámicamente?

Nuevo en React, así que sé amable. Creé un componente de carga de archivos y estoy agregando un botón en App.js que depende del estado de los archivos cargados. Si no hay archivos cargados, dirá "No hay archivos cargados". Si hay archivos cargados, dirá "Crear nuevo proyecto". Estoy usando el enlace useState para configurar la información de mi proyecto:

 const [newProjectInfo, setNewProjectInfo] = useState([documents: []});
 import React, { useEffect, useRef, useState } from "react"; import FileUpload from "./components/file-upload/fileUpload"; import { //Custom components created with styled-components UploadToProjectContainer, CreateNewProjectBtn, NoFilesSelectedBtn } from "./components/file-upload/fileUploadStyles"; function App() { const [newProjectInfo, setNewProjectInfo] = useState({ documents: [] }); const updateUploadedFiles = (files) => setNewProjectInfo({ ...newProjectInfo, documents: files}); const handleSubmit = (event) => { event.preventDefault(); //add logic to create a new project } return ( <div> <form onSubmit={handleSubmit} > <FileUpload accept=".jpg,.png,.jpeg,.pdf,.doc,.gif,.bmp,.tiff,.svg,.dwg,.docx,.eps,.exe" label="File(s)" multiple updateFilesCb={updateUploadedFiles} /> <UploadToProjectContainer> <button> Create New Project. </button> </UploadToProjectContainer> </form> </div> ); } export default App;

Como puede ver, en este momento hay un botón estático "Crear nuevo proyecto". Creé contenedores con estilo para cada uno de los botones que quiero representar dinámicamente (ver: CreateNewProjectBtn & NoFilesSelectedBtn ), pero no puedo acceder a los accesorios del estado para cambiar el botón cuando se carga un archivo. Sé que tengo que usar useEffect pero el document[] prop de newProjectInfo es inaccesible, pero eso es lo que se está actualizando. Esperemos que esto haya sido claro. Por favor, hágamelo saber si necesito aclarar.

almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Ya veo, desea representar condicionalmente un texto de botón diferente en función de la matriz newProjectInfo.documents que se completa o no. Use un operador ternario para verificar si la matriz newProjectInfo.documents tiene una propiedad de length real ( distinta de cero ) para representar condicionalmente una cadena u otra.

No es necesario usar un useEffect para esto, actualizar el estado activará una nueva representación. Simplemente calcule el texto del botón mostrado por ciclo de renderizado.

Ejemplo:

 <button> {newProjectInfo.documents.length ? "No files uploaded" : "Create New Project"} </button>
almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error