1

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

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

如何确保正确id传递到ListDetailsModal's的listId所有页面上？HomeReactTable

链接：现场演示 | 来源

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 组件类：

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

1 回答 1

1

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

componentWillReceiveProps(nextProps: any) {
    this.listId = nextProps.listId;
}
于 2018-02-18T01:57:52.497 回答