.map不是函数。通过对象数组进行映射。 （反应钩）

Question

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

我正在努力映射和显示电影的标题并出现错误apiData.map不是函数

数据是状态数据，是对象的数组。

我想从对象访问标题，即 {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映射数据会不断困扰我，因此请您澄清一下。

Answer 1

因为您将apiData的初始数据设置为object。 请参考我的代码：

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>

Answer 2

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

我认为，只要将其更改为const [apiData, setApiData] = useState([]);即可。编码愉快