Reactjs 如何通过搜索实现fetchapi

我有一个搜索栏。当我输入任何电影的名称时，必须显示过滤后的数据（作为从API获取的结果）

函数应用程序（）{
const[films，setFilms]=useState（[]）
常量[searchText，setSearchText]=useState（“”）
常量[filteredRes，setFilteredRes]=useState（[]）
常量url=`http://www.omdbapi.com/?apikey=KEY&s=${searchText}`
useffect（（）=>{
loadData（）
}，[searchText]）
const loadData=async（）=>{
const res=等待axios.get（url）
setFilms（res.data.Search）
const filtered=wait films.filter（i=>i.toLowerCase（）.includes（searchText））
setFilteredRes（已过滤）
}
const onTextChange=（e）=>{
setSearchText（如目标值）
}
返回(
书店
{filteredRes.map（项=>{
报税表（
{item.title}
{项目年份}
)
})}
);
}

我有一个问题：

---

未处理的拒绝（TypeError）：无法读取未定义的属性“filter”。但是为什么我要将抓取的电影保存在const[films]中呢？

o输出：

您不必过滤提取的数据。此外，Axios提取的数据已根据

serchText

进行过滤，因此Axios调用将完成所有操作

完整示例：

import React, { useState } from "react";
import Axios from "axios";

const APIKEY = "your api";
export default function App() {
  const [searchText, setSearchText] = useState("");
  const [films, setFilms] = useState([]);

  const handleSubmit = (event) => {
    event.preventDefault();
    if (!searchText) {
      alert("Please enter movie name");
      return;
    }
    Axios.get(
      `http://www.omdbapi.com/?i=tt3896198&apikey=${APIKEY}&s=${searchText}`
    )
      .then((response) => {
        console.log(response.data);
        setFilms(response.data.Search);
      })
      .catch((error) => {
        console.log(error);
      });
  };
  return (
    <div className="App">
      <form onSubmit={handleSubmit}>
        <input
          placeholder={"Search movie"}
          onChange={(event) => {
            setSearchText(event.target.value);
          }}
        />
        <button>Search</button>
      </form>

      {films.map((film) => (
        <div>
          <img src={film["Poster"]} alt={film["Title"]} width={100} />
          <p>{film["Title"]}</p>
          <p>{film["Year"]}</p>
        </div>
      ))}
    </div>
  );
}

import React，{useState}来自“React”；
从“Axios”导入Axios；
const APIKEY=“您的api”；
导出默认函数App（）{
常量[searchText，setSearchText]=useState（“”）；
const[films，setFilms]=useState（[]）；
const handleSubmit=（事件）=>{
event.preventDefault（）；
如果（！searchText）{
警报（“请输入电影名称”）；
返回；
}
Axios.get(
`http://www.omdbapi.com/?i=tt3896198&apikey=${APIKEY}&s=${searchText}`
)
。然后（（响应）=>{
console.log（response.data）；
setFilms（响应、数据、搜索）；
})
.catch（（错误）=>{
console.log（错误）；
});
};
返回(
{
setSearchText（事件.目标.值）；
}}
/>
搜寻
{films.map（（film）=>(
{电影[“标题”]}

{电影[“年]}

))}
);
}

---

好的。非常感谢。但我还有一个问题。我获取（查找）的数据在控制台中返回一个空数组。但当我插入您的url地址时，控制台显示401状态代码，并且据说我是未经授权的api密钥可能是错误的。然后使用条件呈现

{films？.map（（film）=>（{film[“Title”]}
{film film Year[“Year”]}
）}

修复了它，现在它可以工作了！感谢你来到月球并回来：）

import React, { useState } from "react";
import Axios from "axios";

const APIKEY = "your api";
export default function App() {
  const [searchText, setSearchText] = useState("");
  const [films, setFilms] = useState([]);

  const handleSubmit = (event) => {
    event.preventDefault();
    if (!searchText) {
      alert("Please enter movie name");
      return;
    }
    Axios.get(
      `http://www.omdbapi.com/?i=tt3896198&apikey=${APIKEY}&s=${searchText}`
    )
      .then((response) => {
        console.log(response.data);
        setFilms(response.data.Search);
      })
      .catch((error) => {
        console.log(error);
      });
  };
  return (
    <div className="App">
      <form onSubmit={handleSubmit}>
        <input
          placeholder={"Search movie"}
          onChange={(event) => {
            setSearchText(event.target.value);
          }}
        />
        <button>Search</button>
      </form>

      {films.map((film) => (
        <div>
          <img src={film["Poster"]} alt={film["Title"]} width={100} />
          <p>{film["Title"]}</p>
          <p>{film["Year"]}</p>
        </div>
      ))}
    </div>
  );
}