如果搜索值與數據不匹配，如何顯示“未找到結果”。 反應中的 Json 文件

Question

如果搜索值與 data.Json 文件不匹配，我想顯示“未找到結果”。

我是 React 的新手，我正在學習 React 並且對此一無所知..

任何人都可以幫助我嗎？

我提供工作現場演示鏈接： https://codesandbox.io/live/f3c1f67d5c2

這是搜索頁面代碼：

import data from './Data.json';


export const SearchPage = () => {

  const [searchValue, setSearchValue] = useState('');
  function handleChange(event) {
    setSearchValue(event.target.value);
  }

  return (
    <>
      <form>
        <input type="text" placeholder="Search.." name="search" value={searchValue} placeholder="Search something.." onChange={handleChange}/>
        <button type="submit">Search</button>
      </form>
      <div className="dropdown">
      {  
            data.filter(val => {
              if (val.title.toLowerCase().includes(searchValue.toLowerCase())) {
                return val;
              } else if (val.toLowerCase()==!searchValue.toLowerCase()){
                
              }
              if (val.title.toLowerCase().includes(searchValue.toLowerCase())) {
                return val;
              } 
            }).map((val) =>{
              return(
                <div className={val.css} key={val.id}>
                    <button className='button_css' >{val.title}</button>
                </div>
              )
            })
          }        
      </div>
    </>
  )
}

這是 data.json 文件：

    {
        "title":"general",
        "css":"template"
    },
    {
        "title":"army",
        "css":"template"
    },
    {
        "title":"police",
        "css":"template"
    },
    {
        "title":"worker",
        "css":"second_step_hide"
    },
    {
        "title":"doctor",
        "css":"first_step_hide"
    },
    {
        "title":"teacher",
        "css":"first_step_hide"
    }
]```

Answer 1

我將 data.filter 分配給一個變量並檢查它的長度並基於它打印“未找到”

這是我所做的：

    import React, { useState } from "react";
import data from "./Data.json";

export const SearchPage = () => {
  const [searchValue, setSearchValue] = useState("");
  function handleChange(event) {
    setSearchValue(event.target.value);
  }

  let list = data.filter((val) => {
    if (val.title.toLowerCase().includes(searchValue.toLowerCase())) {
      return val;
    } else if (val.title.toLowerCase() == !searchValue.toLowerCase()) {
    }
    if (val.title.toLowerCase().includes(searchValue.toLowerCase())) {
      return val;
    }
  });

  return (
    <>
      <form>
        <input
          type="text"
          placeholder="Search.."
          name="search"
          value={searchValue}
          placeholder="Search something.."
          onChange={handleChange}
        />
        <button type="submit">Search</button>
      </form>
      <div className="dropdown">
        {list.length > 0
          ? list.map((val) => {
              return (
                <div className={val.css} key={val.id}>
                  <button className="button_css">{val.title}</button>
                </div>
              );
            })
          : "no found"}
      </div>
    </>
  );
};