当用户在 React 中不在 API 中的输入字段中键入错误名称时如何显示 "No Data Found"

Question

这里我想说明一下，如果用户输入的名称输入字段不正确，则会显示“未找到数据”。用户将在输入字段（搜索选项）中输入的名称，以便只显示具有该名称的匹配数据，为此我使用过滤器，它工作正常，但问题是如果用户在输入字段中输入不正确的名称然后我想显示 "No Data Found" 所以为此我在地图中传递 NULL 值并给出条件

数据==空？（

未找到数据

）：（...）

但是这是行不通的，所以请帮我解决这个问题。

Body.jsx -- 这里借助道具获取用户在输入字段中输入的数据

import React, { useState, useEffect } from "react";
import "../css/body.css";
import Home from "./Home.jsx";


const Body = (props) => {
  const [user, setUser] = useState([]);
  const [loading, setLoading] = useState(false);
 

  useEffect(() => {
    setLoading(true)
    fetch("https://randomuser.me/api/?results=15")
      .then((res) => {
        return res.json();
      })
      .then((data) => {     
        let result = data.results;
        console.log(result);
        setUser(result);
        setLoading(false);
      },
      (error) => {
        console.log(error);
      }
      );
  }, []);


  return (
    <>
      {
        loading ? (<Home/>) :
       (   
      <div className="main">
        { 
         
          user.filter((value) => {
          let x= value.name.first+" "+value.name.last;
          
          if(props.searching === "")
            return value;
          else if(x.toLowerCase().includes(props.searching.toLowerCase()))
               return value;
          else
             return null;
         }).map((data,index) => (
           
           data==null ? (
             <h1>NO Data Found</h1>
          ) : (
          <div className="card" key={index} >
            <div className="card__body">
              <div className="picture">
                <img src={data.picture.large} />
              </div>
              <span>{data.nat}</span>
              <div className="p">
                <h3 className="card__title">
                  {data.name.title +
                    ". " +
                    data.name.first +
                    " " +
                    data.name.last +
                    " | " +
                    data.dob.age}
                </h3>

                <h4 className="card__email">{data.email}</h4>
                <p className="card__text">
                  {data.location.street.number +
                    data.location.street.name +
                    "," +
                    data.location.city +
                    "," +
                    data.location.state +
                    "," +
                    data.location.country +
                    "," +
                    data.location.postcode}
                </p>
              </div>
            </div>
          </div>
           )
        ))

       
         }
        
      </div>
      
      )
      }
    </>
  );

  
 
};

export default Body;

Answer 1

这里为您解决了这个问题，并进行了一些清理：

import React, { useState, useEffect } from "react";
import "../css/body.css";
import Home from "./Home.jsx";


const Body = (props) => {
  const [user, setUser] = useState([]);
  const [loading, setLoading] = useState(false);
 

  useEffect(() => {
    setLoading(true)
    fetch("https://randomuser.me/api/?results=15")
      .then((res) => {
        return res.json();
      })
      .then((data) => {     
        let result = data.results;
        setUser(result);
        setLoading(false);
      },
      (error) => {
        console.log(error);
      }
      );
  }, []);


  if(loading){
    return <Home/>
  }

  const filteredUser = user.filter((value) => {
          let x = value.name.first + " " + value.name.last;
          
          if(!props.searching || x.toLowerCase().includes(props.searching.toLowerCase()))
            {
              return true; // you have to return true or false, to include or exclude the value while filtering
            }else{
              return false;
            }
         })


  return 
      <div className="main">
      {!filteredUser.length ? 
        <h1>NO Data Found</h1>:
        <>{filteredUser.map((data,index) => (<User index = {index} data= {data} />))}}</>
      </div> 
 
};


function User({index, data}) {
  return  <div className="card" key={index} >
            <div className="card__body">
              <div className="picture">
                <img src={data.picture.large} />
              </div>
              <span>{data.nat}</span>
              <div className="p">
                <h3 className="card__title">
                  {data.name.title +
                    ". " +
                    data.name.first +
                    " " +
                    data.name.last +
                    " | " +
                    data.dob.age}
                </h3>

                <h4 className="card__email">{data.email}</h4>
                <p className="card__text">
                  {data.location.street.number +
                    data.location.street.name +
                    "," +
                    data.location.city +
                    "," +
                    data.location.state +
                    "," +
                    data.location.country +
                    "," +
                    data.location.postcode}
                </p>
              </div>
            </div>
          </div>
}

当用户在 React 中不在 API 中的输入字段中键入错误名称时如何显示 "No Data Found"

how to display "No Data Found" when user type wrong name in input field which is not in API in React

javascript

search

dictionary

filter

reactjs

未找到数据