arrays - 使用反应钩子更新数组

问题描述

我正在使用 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 并显示查询搜索图像。

我遇到的错误是

TypeError：queryPhotos 不可迭代

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

标签： arraysreactjsreact-hooksuse-state

简而言之。queryPhotos 不是数组。

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

因此，将这一行从

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

至

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

应该解决你的问题。

arrays - 使用反应钩子更新数组

问题描述

解决方案

推荐阅读