Неправильный реквизит передан дочернему компоненту на страницах 2+ таблицы реакции

Question

В случае таблицы реакции я добавляю кнопку в каждую строку, чтобы запустить реактивный модал. Это работает, как и ожидалось, на первой странице таблицы, но на последующих страницах неверно id опора передается в мой обычай ReactModal"s listId, id передается, как представляется, строка из той же позиции на первой странице таблицы. Таким образом, модальные компоненты в первой позиции страниц 2+ получают id опора ряда в первой позиции на первой странице.

Я думаю, что линия находится в Home ниже где Cell: (row: any) => <ListDetailsModal listId={row.value} />,, Значение {row.value} кажется, не работает правильно на страницах таблицы, которые не являются первыми.

Как я могу обеспечить правильный id передается в ListDetailsModal"s listId на всех страницах Home"s ReactTable?

Ссылки: Live Demo | Источник

класс компонентов реактивной таблицы:

export class Home extends React.Component<RouteComponentProps<{}>, IFilterListsState> {
    constructor(props: any) {
        super(props);
        this.state = { filterLists: [], loading: true };
        fetch("https://api.filterlists.com/v1/lists")
            .then(response => response.json() as Promise<IFilterListSummaryDto[]>)
            .then(data => { this.setState({ filterLists: data, loading: false }); });
    }

    render() {
        const contents = this.state.loading
            ? <p>
                  <em>Loading...</em>
              </p>
            : Home.renderFilterListsTable(this.state.filterLists);
        return <div>
                   {contents}
               </div>;
    }

    private static renderFilterListsTable(filterLists: IFilterListSummaryDto[]) {
        return <ReactTable
                   data={filterLists}
                   defaultSorted={[{id: "name"}]}
                   columns={[
                       {
                           Header: "Name",
                           accessor: "name",
                           filterable: true,
                           filterMethod: (filter: any, row: any) => row[filter.id].toUpperCase().includes(filter.value.toUpperCase()),
                           sortMethod: (a: any, b: any) =>  a.toUpperCase() > b.toUpperCase() ? 1 : -1
                       },
                       {
                           Header: "Details",
                           accessor: "id",
                           sortable: false,
                           Cell: (row: any) => <ListDetailsModal listId={row.value} />,
                           style: { textAlign: "center" },
                           width: 100
                       }
                   ]}/>;
    }
}

класс реактивной составляющей:

export default class ListDetailsModal extends React.Component<any, any> {
    private readonly listId: any;

    constructor(props: any) {
        super(props);
        this.state = { showModal: false, loading: true };
        this.listId = props.listId;
        this.handleOpenModal = this.handleOpenModal.bind(this);
        this.handleCloseModal = this.handleCloseModal.bind(this);
    }

    handleOpenModal() {
        this.setState({ showModal: true });
        fetch(`https://api.filterlists.com/v1/lists/${this.listId}`)
            .then(response => response.json() as Promise<IFilterListDetailsDto[]>)
            .then(data => { this.setState({ filterListDetails: data, loading: false }); });
    }

    handleCloseModal() {
        this.setState({ showModal: false });
    }

    render() {
        const contents = this.state.loading
            ? null
            : <ReactModal
                  isOpen={this.state.showModal}
                  onRequestClose={this.handleCloseModal}
                  shouldCloseOnOverlayClick={true}>
                  <FilterListDetails details={this.state.filterListDetails}/>
                  <button onClick={this.handleCloseModal} className="btn btn-danger btn-block push-to-bottom">Close</button>
              </ReactModal>;
        return (
            <div>
                <button onClick={this.handleOpenModal} className="btn btn-primary btn-block">Details</button>
                {contents}
            </div>
        );
    }
}

Answer 1

Ах, проблема была в том, что уже отрендеренный компонент не обновлялся новыми реквизитами, когда пользователь изменял страницы таблицы. Все, что нужно было добавить это, чтобы захватить новые реквизиты.

componentWillReceiveProps(nextProps: any) {
    this.listId = nextProps.listId;
}