Библиотека react-bootstrap-tabs, ошибка компиляции
возникают проблемы с библиотекой https://github.com/freeranger/react-bootstrap-tabs, используемой для создания вкладок в React
Мой код, который работает:
<Tabs onSelect = {(index, label) => console.info(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.info(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>
Это дает мне ошибку
TypeError: Cannot read property 'props' of undefined TabsComponent._renderContent C:/Users/repos/node_modules/react-bootstrap-tabs/dist/index.js:198
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
У вас есть данные в вашем users состоянии?
Глядя на код библиотеки на строку ошибки:
var contentClassNames = (0, _classnames2.default)('tab-content', this.props.contentClass, contentTab.props.className);
Я думаю, что он пытается найти вкладку внутри компонента Tabs. Если ваше состояние users пусто, ваша карта приведет к пустому массиву.
Попробуйте добавить вкладку по умолчанию помимо this.users.map, или, если не вкладку, то хотя бы фиктивный элемент, такой как <div/>, который вы можете скрыть с помощью css или, возможно, <React.Fragment/>.
Я думаю, что ваш массив пользователей изначально пуст ([]). Это приводит к ошибке компонента вкладок:
https://codesandbox.io/s/wyj88jky2k
Вы должны убедиться, что this.state.users имеет записи, прежде чем пытаться отображать свои вкладки.
Честно говоря, я ожидал, что библиотека вкладок сможет обрабатывать пустой массив вкладок — возможно, вы могли бы вызвать ошибку на их странице github.
Спасибо за ваш ответ. Массив моих пользователей изначально не пуст.
Чувак, когда я очищаю массив, ты получаешь точно такое же сообщение об ошибке. В какой-то момент он должен быть пуст. Вы вышли из массива перед его рендерингом?
12 часов в коде имеет смысл.
Я меняю только Вкладка, но мне нужно перерисовать весь элемент, начиная с Вкладки после загрузки страницы
{!this.state.loading ? <UsersTabs users = {this.state.users} /> : "Loading"}
С участием
class UsersTabs extends Component {
render() {
return (
<Tabs onSelect = {(index, label) => console.info(label + ' selected')}>
{this.props.users.map(market =>
<Tab label = {user} >
...
</Tab>
)}
</Tabs>
);
}
}
Спасибо за ответ. Пользователи не пусты, это просто Array(2) 0: "Джон" 1: "Майк"