библиотека react-bootstrap-tabs, ошибка соответствия

#javascript #reactjs

Вопрос:

возникли проблемы с https://github.com/freeranger/react-bootstrap-tabs библиотека, используемая для создания вкладок в React

Мой код, который работает:

 <Tabs onSelect={(index, label) => console.log(label   ' selected')}>
                            <Tab label="TEST">
                                <div className="table-scrollable table-scrollable-borderless">
                                    <table className="table table-hover table-light">
                                        <thead>
                                            <tr className="uppercase">
                                                <th> # </th>
                                                <th> First Name </th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td> 1 </td>
                                                <td> Mark </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </Tab>
                            <Tab label="TEST2">
                                <div className="table-scrollable table-scrollable-borderless">
                                    <table className="table table-hover table-light">
                                        <thead>
                                            <tr className="uppercase">
                                                <th> # </th>
                                                <th> First Name </th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td> 1 </td>
                                                <td> Mark </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </Tab>
                    </Tabs>

Но если я изменю на

 <Tabs onSelect={(index, label) => console.log(label   ' selected')}>
                            {this.state.users.map(user=>
                                <Tab label={user} >
                                    <div className="table-scrollable table-scrollable-borderless">
                                        <table className="table table-hover table-light">
                                            <thead>
                                                <tr className="uppercase">
                                                    <th> # </th>
                                                    <th> First Name </th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td> 1 </td>
                                                    <td> Mark </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </Tab>
                            )}
                        </Tabs>

Это выдает мне ошибку

Ошибка типа: не удается прочитать свойство ‘props’ неопределенного компонента TABS._renderContent C:/Users/repos/node_modules/react-bootstrap-tabs/dist/index.js:198

Ответ №1:

У вас есть данные в вашем users состоянии? Просматриваю код библиотеки в строке ошибки:

var contentClassNames = (0, _classnames2.default)('tab-content', this.props.contentClass, contentTab.props.className);

Я думаю, что он пытается найти вкладку внутри Tabs компонента. Если ваше users состояние пустое, результатом вашей карты будет пустой массив.

Попробуйте добавить вкладку по умолчанию помимо this.users.map , или если не вкладку, то хотя бы фиктивный элемент типа a, который <div/> вы можете скрыть с помощью css или, возможно, <React.Fragment/> .

Ответ №2:

Я думаю, что ваш массив users изначально пуст ([]). Это приводит к ошибке компонента tabs:

https://codesandbox.io/s/wyj88jky2k

Вы должны проверить, есть ли записи в this.state.users, прежде чем пытаться отобразить ваши вкладки.

Честно говоря, я ожидал бы, что библиотека tabs сможет обрабатывать пустой массив tabs — возможно, вы могли бы вызвать ошибку на их странице github.

1. Спасибо за ваш ответ. Мой массив users изначально не пуст.

2. Чувак, когда я очищаю массив, ты получаешь именно эту ошибку meassage. В какой-то момент она должна быть пустой. Вы выходили из массива перед его отображением?

Ответ №3:

12 часов в коде имеют смысл.

Я меняю только вкладку, но мне нужно повторно отобразить весь элемент, начиная с вкладок после загрузки страницы

 {!this.state.loading ? <UsersTabs users={this.state.users} /> : "Loading"}

 class UsersTabs extends Component {
    render() {
        return (
            <Tabs onSelect={(index, label) => console.log(label   ' selected')}>
                {this.props.users.map(market =>
                    <Tab label={user} >
                        ...
                    </Tab>
                )}
            </Tabs>
        );
    }
}