编辑：

Question

当我尝试对从上级组件获取的图像进行.map渲染以渲染从未飞溅获得的图像时，出现类型错误.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渲染以渲染从未飞溅获得的图像时，出现类型错误.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评论所述

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

因此，这意味着您执行setImage(data.data);时，data.data 不是数组。

请检查data.data中的内容（也许使用console.log），并使用要使用的正确数据.map。

Answer 2

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

仅更改您的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>
    );
};

尝试呈现搜索列表时，获取image.map并非功能错误

2 个答案:

编辑：