Question

我正在使用 Upsplash API 制作应用程序。渲染时我想显示 30 张图像，女巫工作正常。

import React, { useState, useEffect } from "react"

    const ContextProvider =({ children }) =>{
        const [allPhotos, setAllPhotos] = useState([])
        const [cartItems, setCartItems] = useState([])
        const [imageQuery, setImageQuery] = useState('')
      
        useEffect(() => {
            const url = `https://api.unsplash.com/photos?page=5&per_page=30&client_id=${process.env.REACT_APP_UNSPLASH_KEY}`
    
            async function getPhotos() {
                const photosPromise = await fetch(url)
                const photos = await photosPromise.json()
                setAllPhotos(photos)
            }
            getPhotos()
           
        },[])

然后我使用我的上下文将 AllPhotos 传递给我的 Photos.js，并映射到 allPhotos，将照片传递给我的 Image 组件以显示有关图像的信息。

 import React, {useContext} from "react"
    import {Context} from "../Context"
    
    
    function Photos(){
        const {allPhotos} = useContext(Context)
    
        const imageElements = allPhotos.map((photo,index) =>(
            <Image key={photo.id}  photo={photo}/>
        ))
        return(
          <>
          <main>
            {imageElements}
          </main>
          </>
        )
    }
    export default Photos




    const Image = ({  photo }) => {
  return (
    <div
      <img src={photo.urls.thumb} className="image-grid" alt="" />
    </div>
    
  )
}

此处显示 API 中的图像，一切正常。

我现在想做的是添加一个搜索查询，用户可以在其中搜索某些图像。我为输入值做了一个组件

import React, { useContext } from "react"
import {Context} from "../../Context"

const QueryInput = () =>{

    const {imageQuery, setImageQuery, SearchImage} = useContext(Context)
    return(
        <form onSubmit={SearchImage} >
            <label>
                Search Photos
                <input
                type="text"
                className="query-input"
                placeholder="Search Images"
                value={imageQuery}
                onChange={(e) => setImageQuery(e.target.value) }
                />
            </label>
            <button type="submit">Search Image</button>
        </form>
    )
}
export default QueryInput

我在上下文中创建了一个 searchQuery 函数

  const SearchImage  = async (e) =>{
           e.preventDefault()
    
        const queryUrl = `https://api.unsplash.com/search/photos? 
         age=5&per_page=30&query=${imageQuery}&client_id=${APP_KEY}`
    
         const response = await fetch(queryUrl)
         const queryPhotos = await response.json();
        
        
        setAllPhotos(prevState => [...prevState, ...queryPhotos])
     
        }

到目前为止一切正常，我可以使用 console.log(queryPhotos) 并获取他们搜索的查询的用户图像。如果我搜索“星星”，我会得到一堆带有星星的图片。

我遇到的问题是再次映射 allPhotos 并显示查询搜索图像。

我遇到的错误是

类型错误：queryPhotos 不可迭代

我已经有一段时间了。任何信息/建议将不胜感激。关于代码的任何问题或需要其他信息，我都可以提供。谢谢。

Answer 1

简而言之。 queryPhotos 不是数组。

api /photos 和 /search/photos 的 unsplash api 响应有点不同。一个返回一个数组，另一个是一个对象，需要访问results

中的照片

所以，把这一行从

setAllPhotos(prevState => [...prevState, ...queryPhotos])

到

setAllPhotos(prevState => [...prevState, ...queryPhotos.results])

应该可以解决您的问题。

使用反应钩子更新数组

1 个答案: