Я хочу добавить эффект свертывания в мой список, когда я нажимаю кнопку редактирования, чтобы под моим элементом списка отображалось тело для полей ввода для редактирования объекта. Я использую реагирующую загрузку для Свернуть и ant-d для списка.
Вот мой список:
<List
dataSource={this.state.data}
renderItem={item => (
<List.Item key={item.id} actions = {
[
<Button type="primary" onClick={() => this.setState({ open: !open })}
aria-controls="example-fade-text"
aria-expanded={open} >
Edit
</Button>,
<Button type="primary">
Add to cart
</Button>
]
}>
<List.Item.Meta
avatar={<Avatar src={icon} size={64} />}
title={item.name}
description={item.description}
/>
<div>Content</div>
<Collapse in={this.state.open}>
<div id="example-collapse-text">
here's some text
</div>
</Collapse>
</List.Item>
)}
>
Это ошибка, которую я получаю:
Тип элемента недопустим: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: undefined. Скорее всего, вы забыли экспортировать компонент из файла, в котором он определен, или, возможно, вы смешали импорт по умолчанию и имена.
Проверьте метод рендеринга Context.Consumer (я не создавал этот файл, скорее всего, автоматически генерируется по реакции).
29 | axios.get(DataUrl).then(
30 | res => {
31 | const apiData = res.data;
> 32 | this.setState({data: apiData})
| ^ 33 | }
34 | )
35 | }
Это содержимое моего состояния:
state = {
data: [],
loading: false,
hasMore: true,
open: false,
}
и у меня есть const { open } = this.state.open внутри моей функции рендеринга.
Связанные заметки: у меня есть вся вещь, обернутая вокруг InfiniteScroll, но это не должно повлиять на это (я думаю).
Мой вызов fetchData axios прекрасно работает, когда у меня не используется Collapse, поэтому я не знаю, почему он вызывает эту проблему.