0

Del componente Padre le paso al componente hijo un array de objetos atraves de props. Cuando el componente hijo recibe la data del props, quiero guardardarla en el useSate. De la forma que lo hice no me muestra errores, pero cuando intento hacer el map para recorrer los datos del useState, no muestra nada. Funciona si directamente hago props.operations.map para mostrar los datos en la tabla, lo que pasa es que mas adelante voy a necesitar manipular el estado, por eso decidí utilizar useState.

Componente Padre

const [stateOperations, setStateOperations] = React.useState([]);

React.useEffect(() => {
 getOperations('ingreso');
}, []);

const getOperations = async (type) => {
  const data = await fetch(
    `http://localhost:4000/api/operations/filter/clau@gmail.com/${type}`
  );
  const operationsData = await data.json();
  console.log(operationsData);
  setStateOperations(operationsData);
};

return(
  <OperationsList operations={stateOperations} />
);

Componente hijo OperationsList

const OperationsList = (props) => {
 // cargando la data del props en el useState 
 const[stateOperations, setStateOperations] = React.useState(props.operations)
 let cont = 1;

 return(
  <Table striped bordered hover size="sm">
          <thead>
            <tr>
              <th>Fecha</th>
              <th>Concepto</th>
              <th>Monto</th>
              <th>Tipo</th>
              <th>Categoria</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {stateOperations.map((item) => (
              <tr key={cont++}>
                <td>
                  {moment(item.registration_date)
                    .subtract(10, "days")
                    .calendar()}
                </td>
                <td>{item.concept}</td>
                <td>{item.amount}</td>
                <td>{item.type}</td>
                <td>{item.category}</td>
                <div className="text-center">
                  <button className="btn btn-primary">
                    <FontAwesomeIcon icon={faEdit} />
                  </button>
                  <button className="btn btn-danger">
                    <FontAwesomeIcon icon={faTrash} />
                  </button>
                </div>
              </tr>
            ))}
          </tbody>
  </Table>
 
 );

};

1 respuesta 1

1

La solución sería asignar el nuevo estado dentro de useEffect (en tu componente hijo) para que al momento de entrar y/o llamar al componente, éste setee los valores por defecto al state.

 const [stateOperations, setStateOperations] = React.useState([])

    React.useEffect(() => {
    setStateOperations(props.operations)
 }, [props.operations])

La causa es que el estado no alcanza a ser actualizado cuando se renderiza la información, sino que ocurre posteriormente.

Nos comentas que tal te va!

2
  • Gracias @Paulo Urbano Rivera!, hice unas modificaciones en tu código ya que faltaban 2 detalles: como props envia un array faltaban los corchetes [] en el useState y ademas en el useEfect faltaba [props.operations])
    – Claudio
    el 11 may. 2021 a las 19:56
  • Genial! Se me había pasado eso... un abrazo! el 12 may. 2021 a las 15:33

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.