Javascript React中的搜索功能

所以问题是我有一个搜索功能，一切都可以正常工作，除了当一个项目没有找到时，你会看到它应该显示文本“champion has not found”，但它不是。我会很感激你的帮助我哪里出错了

import data from './data.json'
import  './Champions.css'
import Skills from './Skills'
import CloseIcon from '@material-ui/icons/Close';



const Champions = ({searchValue}) => {
  const [toggleShow, setToggleShow] = useState(false);
  const [currentSelectedChampion, setCurrentSelectedChampion] = useState({});


  const handleSelectChampion = (id) => {
    if (!toggleShow) setToggleShow(true);
    const currentChampion = data.filter((champ) => champ.id === id)[0];
    setCurrentSelectedChampion(currentChampion);

  };


  function filterChampions(champion) {
    return champion.name.toLowerCase().includes(searchValue.toLowerCase());
  }

{data.filter(filterChampions).length === 0 && (<div className='not__found'>
          <h1>No champion has been found</h1>
        </div>)}

  return (
    <div className="champions">
    {data.filter(filterChampions).map((champion) => {
        return (
          <div key={champion.id} onClick={() => handleSelectChampion(champion.id) } >     
            <div className="champion">
              <img className="champion__Image" src={champion.image}></img>
              
              <h4 className="champion__Name">{champion.name}</h4>        
              {toggleShow && currentSelectedChampion.id === champion.id && (                
                <>
                  <Skills currentChampion={currentSelectedChampion} />
                    <CloseIcon onClick={() => setToggleShow(false)}/>              
                </>
              )}
             </div>
          </div>     
        );
      })}
         
    </div>
  );
};

export default Champions

从“./data.json”导入数据
导入“./Champions.css”
从“/Skills”导入技能
从“@material ui/icons/Close”导入CloseIcon；
const Champions=（{searchValue}）=>{
const[toggleShow，setToggleShow]=useState（false）；
const[currentSelectedChampion，setCurrentSelectedChampion]=useState（{}）；
const handleSelectChampion=（id）=>{
如果（！toggleShow）设置toggleShow（true）；
const currentChampion=data.filter（（champ）=>champ.id==id）[0]；
setCurrentSelectedChampion（currentChampion）；
};
功能过滤器配置（冠军）{
return champion.name.toLowerCase（）.includes（searchValue.toLowerCase（））；
}
{data.filter（filterChampions）.length==0&&(
没有找到冠军
)}
返回(
{data.filter（filterChampions）.map（（champion）=>{
返回(
handleSelectChampion（champion.id）}>
{champion.name}
{toggleShow&¤tSelectedChampion.id==champion.id&&（
setToggleShow（false）}/>
)}
);
})}
);
};
导出默认冠军
{data.filter（filterChampions）.map（（champion）=>{
if（data.filter | | champion）{
返回(
没有找到冠军
)
}

如果未找到项，则此if语句不可用=>data.filter（filterChampions）将是空数组，映射函数将不返回任何内容，if语句甚至不运行。

如果您想显示消息，您可以简单地使用：

{data.filter(filterChampions).length === 0 && (<div className='not__found'>
          <h1>No champion has been found</h1>
        </div>)}

{data.filter（filterChampions）.length==0&&(
没有找到冠军
)}
{data.filter（filterChampions）.map（（champion）=>{
if（data.filter | | champion）{
返回(
没有找到冠军
)
}

如果未找到项，则此if语句不可用=>data.filter（filterChampions）将是空数组，映射函数将不返回任何内容，if语句甚至不运行。

如果您想显示消息，您可以简单地使用：

{data.filter(filterChampions).length === 0 && (<div className='not__found'>
          <h1>No champion has been found</h1>
        </div>)}

{data.filter（filterChampions）.length==0&&(
没有找到冠军
)}
第
{data.filter（filterChampions.map（（champion）=>{
行中的
映射将不会为空数组返回任何内容

考虑下面的例子

[].map（e=>'called'）；//[]

[3].map（e=>'called'）；//['called']

因此，如果
{data.filter（filterChampions）
返回一个空数组，则
映射将返回空数组，而不是
div
，其中类
未找到

你需要做的事情如下

  const showChamtions = () => {
    // Put the filtered data in a variable
    const selectedChampions = champions.filter((element) => element.score > 12);

    // If data is there do what you intend to do with it else not_found div

    if (selectedChampions && selectedChampions.length > 0) {
      return selectedChampions.map((element) => <p>{element.name}</p>);
    } else {
      return (
        <div className="not__found">
          <h1>No champion has been found</h1>
        </div>
      );
    }
  };

const showChamtions=（）=>{
//将过滤后的数据放入变量中
const selectedChampions=champions.filter（（element）=>element.score>12）；
//如果数据存在，请执行您打算对其执行的操作，否则无法找到div
if（selectedChampions&&selectedChampions.length>0）{
返回selectedChampions.map（（element）=>{element.name}
）；
}否则{
返回(
没有找到冠军
);
}
};

示例-

您也可以使用条件运算符修改类似于此的代码。
第
{data.filter（filterChampions.map（（champion）=>{
行中的
映射将不会为空数组返回任何内容

考虑下面的例子

[].map（e=>'called'）；//[]

[3].map（e=>'called'）；//['called']

因此，如果
{data.filter（filterChampions）
返回一个空数组，则
映射将返回空数组，而不是
div
，其中类
未找到

你需要做的事情如下

  const showChamtions = () => {
    // Put the filtered data in a variable
    const selectedChampions = champions.filter((element) => element.score > 12);

    // If data is there do what you intend to do with it else not_found div

    if (selectedChampions && selectedChampions.length > 0) {
      return selectedChampions.map((element) => <p>{element.name}</p>);
    } else {
      return (
        <div className="not__found">
          <h1>No champion has been found</h1>
        </div>
      );
    }
  };

const showChamtions=（）=>{
//将过滤后的数据放入变量中
const selectedChampions=champions.filter（（element）=>element.score>12）；
//如果数据存在，请执行您打算对其执行的操作，否则无法找到div
if（selectedChampions&&selectedChampions.length>0）{
返回selectedChampions.map（（element）=>{element.name}
）；
}否则{
返回(
没有找到冠军
);
}
};

示例-

您也可以使用条件运算符修改类似于此的代码。
如何定义筛选函数？使用
data.filter调用的那一个。
@Gh05d是的，它是如何定义筛选函数的？{data.filter（filterChampions）.map（（champion）=>{if（data.filter | champion）{return（没有找到冠军）}->这不会检查状态变量是否有任何更改，因此在第一次检查后将永远不会呈现该变量。请尝试将数据加载到挂钩中，然后过滤数据。
map
在空数组上不会返回任何内容，请尝试
[].map（e=>'called'）
和
[3].map（e=>'called'））
您将看到差异。您需要检查过滤器后是否有数据根据显示内容检查长度。如何定义过滤器函数？使用
data.filter调用的过滤器
@Gh05d是的，它是如何定义过滤器函数的？{data.filter（filterChampions）.map（（champion）=>{if（data.filter | | champion）{