Реагировать: как показать сообщение, если нет записей
Я работаю над проектом в ReactJS, я получаю данные с сервера через API. Я сделал некоторую фильтрацию поиска, я хочу отображать сообщение, если нет доступных записей? Я новичок в ReactJS и не очень хорошо разбираюсь в ReactJS. Кто-нибудь, пожалуйста, помогите мне, как решить эту проблему? . Спасибо
class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
Item: 5,
skip: 0
}
this.handleClick = this.handleClick.bind(this);
}
urlParams() {
return `http://localhost:3001/meetups?filter[limit]=${(this.state.Item)}&&filter[skip]=${this.state.skip}`
}
handleClick() {
this.setState({skip: this.state.skip + 1})
}
render() {
return (
<div>
<a href = {this.urlParams()}>Example link</a>
<pre>{this.urlParams()}</pre>
<button onClick = {this.handleClick}>Change link</button>
</div>
)
}
}
ReactDOM.render(<Example/>, document.querySelector('div#my-example' ))
Не портите посты.
На самом деле, этот вопрос был обновлен. Так вот почему я снова опубликовал это
Это не меняет того факта, что вы не должны портить посты. Либо отредактируйте его, чтобы он стал лучшим вопросом, либо удалите его. А пока буду откатывать ревизию.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вам нужно учитывать несколько вещей:
- Данные загружаются
- Данные загружены, результаты найдены
- Загрузка данных завершена, результатов не найдено
- Ошибка вызова API, ошибка сервера, что-то еще пошло не так (это не будет рассматриваться в этом ответе)
Вот упрощенный пример, охватывающий первые три пункта.
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
loading: true,
data: []
};
}
componentDidMount() {
// simulating API response
setTimeout(() => {
this.setState({
loading: false,
data: [{ name: "foo" }, { name: "bar" }]
});
}, 2000);
}
render() {
const { loading, data } = this.state;
return loading === true
? <div>Loading...</div>
: <div>
{!data.length
? <div>No data found.</div>
: data.map(item => <div>{item.name}</div>)
}
</div>
}
}
Демонстрация CodeSandbox: https://codesandbox.io/s/jzv12lx2v9
Если все, что вам нужно, это показать сообщение, если записи не найдены, вы можете буквально просто проверить атрибут данных в своем состоянии.
{ data.length===0 && <p>No data to show.</p>}
Однако вы можете захотеть проверить, действительно ли ответ http действителен, прежде чем устанавливать с ним состояние.
Можно еще короче: { !data.length && <p>No data to show.</p>}
@vicodin На самом деле, я хочу, чтобы если пользователь что-то ищет, а данные недоступны, я хочу показать сообщение. Это работает, но работает только для разбиения на страницы
@NilsKähler, проверьте код, я обновил свой вопрос