使用React搜索页面 - 需要“找不到结果”。信息

发布于 2025-02-12 09:42:45 字数 643 浏览 1 评论 0原文

我正在处理以下代码。这是一个电影搜索页面。它可以正常工作，但是当我将电影的名称放置在不存在时，它会显示一个空白页面（感谢第8行中的[]）。我希望它向我展示“未找到的结果”消息。有人可以帮我处理代码吗？我正在与项目的前端部分合作。

import React from 'react'
import Card from './Card'

const CardList = ({ results }) => {

    let data = [];
    if(results.data) {
        data = results.data.Search || [];
    }


  return (
    <section className='container'>

    <div className='row justify-content-center'> 
        
            {data.map((item) => (
                <Card key={item.imdbID} movie={item}/>
            ))}
        
    </div>
    </section>

  )
}

export default CardList

原文

I am working with the following code. It is a movie search page. It works fine but when I put the name of a movie that does not exist, it shows me a blank page (thanks to the [] in line 8). I would like it to show me a "No results found" message. Can someone help me with the code? I am working with React in the frontend part of a project.

import React from 'react'
import Card from './Card'

const CardList = ({ results }) => {

    let data = [];
    if(results.data) {
        data = results.data.Search || [];
    }


  return (
    <section className='container'>

    <div className='row justify-content-center'> 
        
            {data.map((item) => (
                <Card key={item.imdbID} movie={item}/>
            ))}
        
    </div>
    </section>

  )
}

export default CardList

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

給妳壹絲溫柔 2025-02-19 09:42:45

您可以添加一个

{
data.length!=0 ? 
data.map((item) => (
                <Card key={item.imdbID} movie={item}/>
            )) 
:
<div>No Results Found!</div> // here you could pass any component to show no results found message
}

You can just add a

{
data.length!=0 ? 
data.map((item) => (
                <Card key={item.imdbID} movie={item}/>
            )) 
:
<div>No Results Found!</div> // here you could pass any component to show no results found message
}

回复收藏 0 原文

~没有更多了~