api接收的数据中的ReactJs.map

并提前感谢您的帮助。 我试图构建一个web应用程序，从API获取数据，在本例中是一个电影数据库API，但当我试图从特定标题搜索映射所有电影时，我得到了。映射不是一个函数错误，我做错了什么？我不能使用useState显示数据吗？ 执行console.log（搜索）时，我可以看到包含所有数据的阵列：

import React, {useEffect, useState} from 'react';
import axios from 'axios';


export default function RandomFacts() {
  const [input, setInput] = useState('');
  const [search, setSearch] = useState(['']);

  useEffect(() => {
    apiCall();
  }, [input]);

  const moviesList = search && search.map((movie, index) =>
    <div className="movies" key="index">
      <li><h2>{movie.Title}</h2></li>
      <li><img src={movie.Poster} alt="poster" /></li>
    </div>,
  );

  const apiCall = async () => {
    const url = 'http://www.omdbapi.com/?s='+input+'&page=1&apikey=536a34c3';

    try {
      const response = await axios.get(url);
      if (response.status === 200 && response !== undefined) {
        const data = response.data;
        setSearch(data.Search);
        console.log(search);
      }
    } catch (error) {
      console.log(error);
    }
  };


  return (
    <div className="main">
      <h1>Movies</h1>
      <div className="textInput">
        <form>
          <label>
            <input type="text" value={input}
              onChange={(e) => setInput(e.target.value)}
            />
          </label>
        </form>
      </div>
      <div className="movies">
        {moviesList}
      </div>

    </div>

  );
}

import React，{useffect，useState}来自“React”；
从“axios”导入axios；
导出默认函数RandomFacts（）{
const[input，setInput]=useState（“”）；
const[search，setSearch]=useState（[''）；
useffect（（）=>{
apiCall（）；
}，[输入]；
const moviesList=search&&search.map（（电影，索引）=>
{movie.Title}

,
);
const apiCall=async（）=>{
常量url=http://www.omdbapi.com/?s=“+input+”&page=1&apikey=536a34c3'；
试一试{
const response=wait axios.get（url）；
if（response.status==200&&response！==未定义）{
const data=response.data；
setSearch（数据搜索）；
控制台日志（搜索）；
}
}捕获（错误）{
console.log（错误）；
}
};
返回(
影视
setInput（e.target.value）}
/>
{moviesList}
);
}

---

API正在返回一个

响应

对象，该对象带有一个

数据

键，该键包含

搜索

、

总体结果

和

响应

。您正在尝试映射此

响应

对象，而不是

response.data.Search中包含的数组

因此，您应该使用
setSearch（response.data.Search）
您可以共享控制台响应日志吗？我假设它是一个具有包含数组的数据键的对象。因此，您需要更改setSearch以使用res.data。感谢您的帮助，编辑了代码，它有一些错误，但错误仍然在发生。添加了控制台。这很有帮助<代码>数据

只是一个猜测，我可以看出您想要

搜索

。您需要查看响应中发生了什么，我建议在出现此错误时逐个添加属性以查找错误

。map不是函数错误，

是因为您尝试在非数组值中使用数组方法。我使用了您的想法，并稍加修改，使其生效。非常感谢你。但我正在努力解决另一个问题，输出与输入不完全匹配，例如，如果我搜索Queen，它只搜索Queen，只有write Queen，我才能得到Queen的结果，我相信在声明const[input，setInput]=useState（“”）时useState存在一些问题，但我已经尝试了一些方法，但无法使其发挥作用。您在州政府有机会更新

input

之前进行了API调用。在这种情况下，没有理由将

input

存储在state中，为什么不直接在

onChange

中进行API调用，而不是

setInput

？更好/更高级的方法是使用

useffect

在

state.input

发生更改时进行API调用。我的方法正确吗？至少我试过了，并且它正确地更新了输入，但是我不能通过if-in-use-effect，它总是返回未定义的…是的，我认为应该可以<在这种情况下，

响应

对象中不会返回code>status（查看控制台日志）。尝试检查

response&&response.response==“True”

，或者如果您的babel配置支持

？

，您可以尝试

response？.response==“True”

。另外，您不想使用

response.data

-我们说的是

response.Search

。尝试了这两种方法，但仍然没有通过if。在if之前使用了一对console.log（输入），并且一切都运行良好，输入变量被正确更新。