Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

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

オープン
  • 何か問題がありますか？
#2,134 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
3/5
見積もり時間
1〜2日
初心者へのやさしさ
35/100
issue の種類
バグ
明瞭さ
説明が足りない
活発さ
停滞
技術スタック
bootstrap, javascript, react, redux
領域
frontend

調査の方向性

Issue に示されている expandRow renderer と NewRecordContent/JobRequestedDate コンポーネントから開始し、getJobRequestedDate と Redux state props を追跡します。2 行を展開して問題を再現し、それぞれが独自の API 値を保持することを確認します。後から展開しても、先に展開した行のデータが置き換えられなくなれば、Issue は解決です。

索引モデルが issue の本文から書いたものです。

説明

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);

主要言語
JavaScript
スター
2.2k
フォーク
758
30日以内にマージされた PR はありません

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

AllenFang/react-bootstrap-table のほかの issue

AllenFang/react-bootstrap-table の issue をすべて見る

似ている issue

JavaScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。