Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Expanding one row updating the value of all the expanded rows with the latest value

Abierto
  • ¿Algo no está bien?
#2,134 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
35/100
Tipo de issue
Error
Claridad
Necesita aclaración
Estado de actividad
Estancado
Stack tecnológico
bootstrap, javascript, react, redux
Área
frontend

Línea de trabajo

Comienza por el renderer expandRow y el componente NewRecordContent/JobRequestedDate mostrado en el issue; después, sigue getJobRequestedDate y las props del estado de Redux. Reproduce el problema expandiendo dos filas y verifica que cada una conserve su propio valor de la API; el issue se resuelve cuando una expansión posterior ya no reemplaza los datos de las filas expandidas anteriormente.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

I have a requirement to call the API to retrieve the value and show value when the expand row is selected. Each row is having a different value which is received by using an API. For example:
There are ten rows displayed on the dashboard with expanding row indicator (individual as well as expand all). If row one is expanded then there will be an API call to retrieve the data and show it under the expanded row. If the second row expanded then there will be another API call to retrieve the data that belongs to the second row and show the same without impacting the first-row data.
I am facing an issue where all the expanded rows are updated with the latest expanded row data which is received from the latest row API call. As part of the issue investigation, I observed that render is called for all the expanded rows instead of the current expanded row.

Note: I am using sagas for API calls. And used the component to retrieve the data from API and store it in the props, show the data in the expanded row.

Can you please help me with how to fix the issue?

Here is the code snippet:

<BootstrapTable
{...props.baseProps}
bootstrap4
pagination={ paginationFactory() }
defaultSorted={ defaultSorted }
filter={ filterFactory() }
loading={ props.loading }
expandRow={ expandRow }
headerClasses="header-class"
noDataIndication="There are currently no active or historic requests."
striped
hover
condensed
/>

const expandRow = {
className: 'expanding-row',
parentClassName: 'expanding-parent-row',
onlyOneExpanding: false,
showExpandColumn: true,
expandByColumnOnly: true,
renderer: row => (
<-Container>
<-Row>
<-Col>
<-NewRecordContent Id={row.Id}/>
<-/Col>
<-/Row>
<-/Container>
)
};

--> NewRecordContent component:
import React from 'react';
import moment from 'moment'
import {getJobRequestedDate} from "../actions/jobRequestedDatetActions";
import { connect } from "react-redux";

type Props = any;
class JobRequestedDate extends React.Component {
constructor(props) { super(props); }

componentDidMount() {      this.props.getJobRequestedDate(this.props.Id) 	}

componentWillUnmount() {
    this.setState(
        {
            requestedDate: []
        },
        () => {}
      );
  }

render() {
    let jobRequestedAt = this.props.job.report.lastJobRequestAt        
    return (
        <>
            <p>Job Requested at: <b><strong>{jobRequestedAt !== undefined ? moment(jobRequestedAt).format("Do MMM YYYY, HH:mm") : ""} </strong></b></p>
        </>
)
}

}

const mapStateToProps = state => ({
job: state.report
});

const mapDispatchToProps = dispatch => {
return {
getLocationReport: (Id) => dispatch(getJobReport(Id)),
}
}

export default connect(mapStateToProps, mapDispatchToProps)(JobRequestedDate);

Lenguaje dominante
JavaScript
Estrellas
2.2k
Forks
758
Sin PR fusionados en 30 d

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de AllenFang/react-bootstrap-table

Todos los issues de AllenFang/react-bootstrap-table

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.