javascript - React:如果没有记录,如何显示消息
问题描述
我正在研究 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' ))
解决方案
您需要考虑以下几点:
- 数据正在加载
- 数据加载完毕,找到结果
- 数据加载完毕,未找到结果
- 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
推荐阅读
- vue.js - 在 quasar 应用程序中安装 TPL 时找不到模块
- python - 如何使用 BeautifulSoup 从页面解析地址?
- tig - 如何查看不同版本的文件?
- c# - 如何在 C# 中打乱二维数组的行
- python - 计算没有隐藏线的出现频率
- clojure - 如何获得序列的倒数第二个元素?Clojure
- javascript - 如何使用 quickbooks-js 从发票中查询所有信息?
- tdd - 单元测试用例语句
- python - 如何解决python selenium中不可调用的“模块”对象
- python - 为什么带有两组括号的 .loc 分配会导致 pandas.DataFrame 中的 NaN?