Question

在react-table的实例中，我在每行添加一个按钮以启动react-modal。这在表的第一页上按预期工作，但在后续页面上，不正确的id道具将传递到我的自定义ReactModal的{{1}}。传递的listId似乎是表的第一页上相同位置的行之一。因此，第2页第一个位置的模态组件会在第一页的第一个位置接收该行的id道具。

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

如何确保在{row.value} id的所有网页上ListDetailsModal listId Home传递正确的ReactTable？

链接：Live Demo | Source

react-table组件类：

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

react-modal component 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

啊，问题是当用户更改了表的页面时，已经渲染的组件没有使用新的道具进行更新。所需要的就是添加它以捕获新的道具。

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

在react-table

1 个答案: