.map 不是函数。通过对象数组映射。（反应钩子）答案

【问题标题】：.map is not a function. map through an array of objects. (React Hooks).map 不是函数。通过对象数组映射。（反应钩子）
【发布时间】：2020-03-04 02:27:32
【问题描述】：

我正在构建一个简单的应用程序，用于从电影数据库中搜索电影。搜索输入成功获取 apiData 并将其设置为具有相同值的电影。

我正在努力映射和显示电影的标题并得到错误 apiData.map is not a function

数据是状态数据是一个对象数组。

我想从对象访问标题，即 {title: 'mad max'} 并显示这个。

这是代码

const SearchPage = () => {
  const [apiData, setApiData] = useState({ results: {} });
  const [searched, setSearched] = useState([]);
  const [loading, setLoading] = useState(false);

  const handleSearch = (event) => {
    setSearched(event.target.value);
  };

  useEffect(() => {
    setLoading(true);
    fetchSearched(searched).then((data) => setApiData(data.results));
    setLoading(false);
  }, [searched]);

  return (
    <>
      <form className='search-form'>
        <input
          type='text'
          placeholder='search for a film'
          onChange={(event) => handleSearch(event)}
        />
      </form>
       // code below causes error when un-commented
      {/* <SearchList apiData={apiData} /> */}
    </>
  );
};

const SearchList = ({ apiData }) => {
  return (
    <div className='search-list'>
      SEARCH LIST
      <ul>
        {apiData.map((movie) => {
          return <SearchItem movie={movie} key={movie.id} />;
        })}
      </ul>
    </div>

const SearchItem = ({ movie }) => {
  return (
    <div className='search-item'>
      <li>{movie.title}</li>
    </div>

来自 API 的映射数据一直让我感到困惑，因此我们将不胜感激。

【问题讨论】：

您是否收到错误消息？您也可以为我们控制台记录您的 apiData 吗？
你的意思是将apiData初始化为{ results: [] }吗？另外，当您将apiData 传递给SearchList 时，您的意思是传递apiData.results 吗？确保您与设置 apiData 的内容一致。是对象吗，result 是数组？

标签： reactjs react-hooks

【解决方案1】：

因为你设置 apiData 的初始数据是对象。请参考我的代码：

const SearchPage = () => {
  const [apiData, setApiData] = useState([]); // change to array
  const [searched, setSearched] = useState(""); // i think it is string
  const [loading, setLoading] = useState(false);

  const handleSearch = (event) => {
    setSearched(event.target.value);
  };

  useEffect(() => {
    if(!searched) return
    setLoading(true);
    fetchSearched(searched).then((data) => {
       setApiData(data.results)
       setLoading(false);
    });

  }, [searched]);

  return (
    <>
      <form className='search-form'>
        <input
          disabled={loading}
          type='text'
          placeholder='search for a film'
          onChange={(event) => handleSearch(event)}
        />
      </form>
       // code below causes error when un-commented
       <SearchList apiData={apiData} />
    </>
  );
};

const SearchList = ({ apiData = [] }) => {
  return (
    <div className='search-list'>
      SEARCH LIST
      <ul>
        {apiData.map((movie) => {
          return <SearchItem movie={movie} key={movie.id} />;
        })}
      </ul>
    </div>

【讨论】：

这行得通，但是你能解释一下这一行吗？ const SearchList = ({ apiData = [] })我以前从未见过将结构化数据设置为空数组。谢谢！
为 apiData 设置默认值（默认值为空数组 [] ）。您可以使用 SearchList.defaultProps = { apiData = []}

【解决方案2】：

您的第一行 const [apiData, setApiData] = useState({ results: {} }); 正在将对象设置为状态。同时，您的 api 响应正在将数组设置为状态。我认为您收到错误是由于您读取初始状态的方式，而不是由于 api 调用。

我认为，如果您只是将其更改为 const [apiData, setApiData] = useState([]);，它将起作用。快乐编码

【讨论】：