尝试呈现搜索列表时获取 image.map 不是函数错误

Question

当我尝试对从父组件获取的图像进行 .map 以渲染从 unsplash 获取的图像时，出现类型错误 .map 不是函数错误。 我已经附上了问题的代码。 如果错误得到解决，则意味着显示搜索栏中的图像

import React, { useState } from 'react';
        import axios from 'axios';
        import SearchBar from '../SearchBar/SearchBar';
        import ImageList from '../ImageList/ImageList';

        const API_KEY = process.env.REACT_APP_ACCESS_KEY;

        const SearchPage = () => {
          const [searchText, setSearchTerm] = useState('');
          const [image, setImage] = useState([]);

          const onInputChange = (e) => {
            setSearchTerm(e.target.value);
          };

          const fetchImages = () => {
            axios.get('https://api.unsplash.com/search/photos', {
              params: { query: searchText },
              headers: {
                Authorization: API_KEY,
              },

            })
              .then((data) => {
                setImage(data.data);
              });
          };
          console.log(image);
          const onSubmitHandler = (e) => {
            e.preventDefault();
            fetchImages();
          };

          return (
            <div>
              <SearchBar
                onSubmitHandler={onSubmitHandler}
                onInputChange={onInputChange}
                searchText={searchText}
              />

              <ImageList image={image} />

            </div>

          );
        };
        export default SearchPage;
    ---------------------------------------------------------------------
    /* eslint-disable jsx-a11y/alt-text */
    /* eslint-disable react/prop-types */
    import React from 'react';

    const ImageList = ({ image }) => {
      const imgs = image && image.map(img => (
        <img
          key={img.id}
          src={img.urls.regular}
        />
      ));
      return (
        <div>
          {' '}
          {imgs}
          {' '}
        </div>
      );
    };

    export default ImageList;

当我尝试对从父组件获取的图像进行 .map 以渲染从 unsplash 获取的图像时，出现类型错误 .map 不是函数错误。 我已经附上了问题的代码。 如果错误得到解决，则意味着显示搜索栏中的图像

Answer 1

因为你有异步调用，需要在.map之前检查一下。

  const imgs = image && image.map(img => (
    <img
      key={img.id}
      src={img.urls.regular}
    />
  ));

或者您可以将image 的默认值设置为一个数组。

// default value as an array []
const ImageList = ({ image = [] }) => {
  const imgs = image.map(img => (
    <img
      key={img.id}
      src={img.urls.regular}
    />
  ));
  return (
    <div>
      {' '}
      {imgs}
      {' '}
    </div>
  );
};

这可能不起作用，具体取决于父组件中image 的默认值。

更好的方法是将useState 的默认值设置为[]。

const [image, setImage] = useState([])

编辑：

正如 OP 在 cmets 中所说的

我已经将父组件中的图像初始化为一个空数组。

所以这意味着当你做setImage(data.data);时，data.data 不是一个数组。

请检查data.data 中的内容（可能使用console.log）并使用您想要使用.map 的正确数据。

Answer 2

使用 map 的一个好习惯是检查要映射的 Array 的一致性。因此，您可以进行简单的比较，以获得一致的字段数组 =]

只改变你的 ImageList 组件

const ImageList = ({ image }) => {

    const getImgs = () => (image.map(img => (
        <img
            key={img.id}
            src={img.urls.regular}
        />
    )));

    const imgs = typeof {} === 'object' && {}.length > 0 ? getImgs : <div>No images</div>;

    return (
        <div>
            {' '}
                {imgs}
            {' '}
        </div>
    );
};