在 react-table 的第 2+ 页上传递给子组件的道具不正确

Question

在 react-table, I am adding a button to each row to launch a react-modal 的实例中。这在 table 的第一页上按预期工作，但在后续页面上，不正确的 id 属性被传递到我的自定义 ReactModal 的 listId 中。传递的 id 似乎是 table 第一页上同一位置的行之一。因此，第 2+ 页第一个位置的模态组件接收第一页第一个位置的行的 id 属性。

我认为有问题的行在 Home 下面 Cell: (row: any) => <ListDetailsModal listId={row.value} />,。 {row.value} 的值似乎在 table 的非第一个页面上无法正常工作。

如何确保在 Home 的 ReactTable 的所有页面上将正确的 id 传递到 ListDetailsModal 的 listId？

链接：Live Demo | Source

react-table组件class:

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
                       }
                   ]}/>;
    }
}

反应模态组件class:

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

啊，问题是当用户更改 table 的页面时，已经渲染的组件没有更新新的道具。所需要的只是添加它来捕获新道具。

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

在 react-table 的第 2+ 页上传递给子组件的道具不正确

Incorrect props passed to child component on pages 2+ of react-table

javascript

reactjs

typescript

react-modal

react-table