在這里，我想表明，如果用戶輸入的名稱輸入欄位不正確，則會顯示“未找到資料”。用戶將在輸入欄位中輸入的名稱（搜索選項），以便只顯示與該名稱匹配的資料，為此我使用過濾器，它作業正常，但問題是如果用戶在輸入欄位中輸入錯誤的名稱，那么我想顯示“未找到資料”所以為此我在地圖中傳遞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;

uj5u.com熱心網友回復：

在這里為您解決了這個問題，并進行了一些清理：

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>
}

標籤：javascript 反应 字典 搜索 筛选

上一篇：TypeError:unhashabletype:'dict'從復雜串列結構中洗掉重復項

下一篇：將鍵值對分配給c#中2個陣列的字典的最佳方法