Javascript TypeError:无法读取属性'；过滤器'；未定义的类型（实时搜索）

所以，我有一段从api检索电影的代码，我正在尝试实现实时搜索。我创建了一个if语句来检查输入，但每次我在输入字段中输入第一个字符时，都会出现filter undefined错误。我怎样才能解决这个问题

import React, { useState, useEffect } from "react";

const SearchMovie = () => {
  const [state, setState] = useState([]);
  const [movie, setmovie] = useState("");
  const [search, setSearch] = useState("");
  const key = "xxxxxxxx";
  const url = `http://www.omdbapi.com/?s=${movie}&apikey=${key}`;

  useEffect(() => {
    getData();
  }, [movie]);

  const getData = async () => {
    const data = await fetch(url);
    const response = await data.json();
    setState(response.Search);
    console.log(response.Search);
  };
  
  const updateSearch = (e) => {
    setSearch(e.target.value);
  };

  const getSearch = (e) => {
    e.preventDefault();
    setmovie(search);
    setSearch("");
  }

    if(search.length > 0) {
  setState(state.filter((i)=>{
      return i.Title.match(search)
  }))
} 
 
  return (
    <div>
     <form onSubmit={getSearch} className="search-form">
        <input
          type="text"
          className="search-bar"
          value={search}
          onChange={updateSearch}
        />
        <button className="search-button" type="submit">
          Search
        </button>
      </form> 
           {(state || []).map((details) => (  
              <>
       <p>{details.Title}</p>
       <p>{details.Year}</p>
       <img src={details.Poster} alt=""/>
       </>
     ))}   
    </div>
  );
};

export default SearchMovie;

import React，{useState，useffect}来自“React”；
const SearchMovie=（）=>{
const[state，setState]=useState（[]）；
const[movie，setmovie]=useState（“”）；
const[search，setSearch]=useState（“”）；
const key=“xxxxxxxx”；
常量url=`http://www.omdbapi.com/?s=${movie}&apikey=${key}`；
useffect（（）=>{
getData（）；
}，[电影]；
const getData=async（）=>{
常量数据=等待获取（url）；
const response=wait data.json（）；
setState（response.Search）；
console.log（response.Search）；
};
常量更新搜索=（e）=>{
设置搜索（如目标值）；
};
const getSearch=（e）=>{
e、 预防默认值（）；
setmovie（搜索）；
集合搜索（“”）；
}
如果（search.length>0）{
设置状态（状态过滤器（（i）=>{
返回i.Title.match（搜索）
}))
} 
返回(
搜寻
{（州| |[]）。地图（（详情）=>（
{details.Title}

{详情。年份}

))}   
);
};
导出默认搜索电影；

您已在

未定义的
上调用
过滤器
。因为您有
设置状态（response.Search）
。我认为你的搜索结果没有定义。让我们检查一下

  const getData = async () => {
    const data = await fetch(url);
    const response = await data.json();
    setState(response.Search ? response.Search : []); 
    //or
    //if (response.Search) setState(response.Search)
    console.log(response.Search);
  };

您已在
未定义的
上调用
过滤器
。因为您有
设置状态（response.Search）
。我认为你的搜索结果没有定义。让我们检查一下

  const getData = async () => {
    const data = await fetch(url);
    const response = await data.json();
    setState(response.Search ? response.Search : []); 
    //or
    //if (response.Search) setState(response.Search)
    console.log(response.Search);
  };

我不认为你需要在那里做if语句，因为如果它是空的，它会发送一个空数组。我很确定，像大多数API一样，当值为零时，他会返回空数组或对象。你有什么建议？你能在搜索结果中给我们显示数据吗？我的意思是“console.log（响应）”`它返回所有api数据，就在我取消对live Search的if语句的注释时，我得到了一个错误api数据是什么样子的？我不认为你需要在那里执行if语句，因为如果它是空的，它将发送一个空数组。我非常确定，与大多数api一样，当存在零值时，他返回空数组或对象。你有什么建议吗？你能以搜索结果？我的意思是“console.log（响应）”`它返回所有api数据，就在我取消对live Search的if语句的注释时，我得到了错误api数据是什么样子的？