当前位置: 首页 > 知识库问答 >
问题:

反应:如果没有记录,如何显示消息[重复]

谷梁云瀚
2023-03-14

我正在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' ))

共有2个答案

令狐宏浚
2023-03-14

如果您只需要在没有找到记录的情况下显示一条消息,那么您可以从字面上检查您所在州的数据属性。

{ data.length===0 && <p>No data to show.</p>}

但是,在使用超文本传输协议响应设置状态之前,您可能需要检查它是否实际上有效。

陈松
2023-03-14

您需要考虑以下几点:

  • 数据正在加载
  • 数据加载完成,找到结果
  • 数据加载完成,未找到结果
  • 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

 类似资料:
  • 我在ReactJS中工作,我通过API从服务器获取数据。我做了一些搜索过滤,我想显示消息,如果没有记录可用?我是ReactJS的初学者,没有太多关于ReactJS的知识。 代码:

  • 问题内容: 状态的JavaDocs: 级别降序为: (最高值) (最低值) 资源 输出量 问题陈述 我的示例将设置为,因此我希望每个循环看到2条消息。相反,我为每个循环看到一条消息(消息丢失)。 题 为了查看(或)输出,需要进行哪些更改? 更新(解决方案) 感谢Vineet Reynolds的回答,该版本可以按照我的期望工作。它显示3条消息和3条消息。 问题答案: 记录器仅记录消息,即它们创建日志

  • 这是完整的代码,这是一个滚动程序的原型,它被打破了(尽管如此),但是每当我试图点击它时,我都会看到没有响应的窗口

  • 问题内容: 使用JSF1.2,如果我的数据表绑定没有返回任何行,我想显示一条消息。 我怎么做? 还有一些要点-如果表为空,如何完全隐藏表? 谢谢。 问题答案: 利用该属性。它接受一个布尔表达式。您可以借助EL的关键字在表达式内评估数据表的值。如果返回,则不会渲染整个组件(及其子组件)。 对于您感兴趣的情况,以下是一些其他基本示例,说明如何利用属性内的EL功率: 也可以看看: Java EE 7教程

  • 问题内容: 我正在开发一个简单的桌面应用程序(不是webapp)。 这是我的: 如你所见,为了消除控制台中的Spring日志消息,我尝试了以下解决方案: 当我从代码中调用log4j记录器时,记录消息是根据上面指定的模式进行的(这很好)。 但是,最糟糕的是-我仍然从Spring进入控制台的DEBUG级别消息…它们看起来像这里: 无法禁用日志记录消息 他们有不同的模式。好像他们忽略了我的设置。 我还尝

  • 在mysql中,我创建了一个查询,希望获取每个日期的最近一个月的数据,如果没有找到特定日期的记录,那么它应该显示0。 我的mysql查询是 仍然得到同样的结果