Пытаюсь сделать: При нажатии на кнопку, отправлялся запрос (имитировал с помощью setTimeout
), и пока ожидается ответ появлялось слово "Загрузка". После соответственно вместо загрузки появляется результат запроса, в моем случае просто текст, обновляю через state
. Реализую это через компоненты высшего порядка.
Вот код:
import React, { Component } from 'react';
import { BrowserRouter as Router, Link} from 'react-router-dom';
class Btn extends Component {
render() {
return (
<button onClick = {this.props.onClick}>Загрузить данные</button>
)
}
}
const HocText = (props)=> ({
render: () => (
<p {...props}></p>
);
});
class Lesson extends Component {
state = {
data: '',
}
updateData = () => (
window.setTimeout(() => (this.setState({ data: 'Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. '})), 3000);
);
render() {
return (
<div>
<Btn onClick={this.updateData} />
<HocText to='home'>{this.state.data}</HocText>
</div>
);
}
}
export default Lesson
Сам state
обновляется, тем не менее компонент HocText
нет. С чем это может быть связано?
HocText
какая-то муть. Почему функция возвращает объект? 2. Сделай запускаемый пример.