即使数组不为空，函数也给了我一个空数组

Question

我在一个项目中使用 Reactjs。我有一个组件，我在其中获取 unsplash api 并获取所有状态数据。我已经安慰了数据，我在这里得到了数据。没关系，检查这段代码，然后让我们继续前进。

import React,{useState} from 'react'
import { Controllers } from './Controllers'
import { Viewer } from './Viewer'
import axios from 'axios'
import {DndProvider} from 'react-dnd'
import { HTML5Backend } from 'react-dnd-html5-backend'

export const Home = () => {

    const [art, setArt]=useState([])   
   
    const fetchArt=async()=>{
        const res = await axios.get('https://api.unsplash.com/photos/?client_id=6PTwdXbHvJktVaOjlXJevpv0LJhpuhA5gE36W6DsJkA');
        const data = await res.data;
        // console.log(data);
        setArt(data);
    }

    // console.log(art);   // got the data here
   
    return (
        <DndProvider backend={HTML5Backend}>
            <div className='wrapper'>
                <div className='main-box'>
                    <Controllers fetchArt={fetchArt} art={art}/>                   
                    <Viewer art={art}/>             
                </div>
            </div>
        </DndProvider>        
    )
}

接下来我将这个数据或状态（它是一个对象数组）作为道具传递给另一个组件，并且我也确实在这个组件中获取了数据。那也很好，让我们继续前进。

现在在同一个组件中...我有一个功能，我正在整理相同的数据，但我无法在此处获取数据。

当我评论该控制台然后再次取消评论它然后触发相同的功能时，现在令人讨厌的部分令人惊讶的是我在控制台中获取数据。请检查代码和图片 here

这是我的 github 链接：

https://github.com/HamzaAnwar1998/tshirt-customizer-app-

import React,{useState} from 'react'
import { Icon } from 'react-icons-kit'
import {undo} from 'react-icons-kit/icomoon/undo'
import {redo} from 'react-icons-kit/icomoon/redo'
import front from '../images/front.png'
import back from '../images/back.png'
import {zoomIn} from 'react-icons-kit/feather/zoomIn'
import {useDrop} from 'react-dnd'

export const Viewer = ({art}) => {
    
    // console.log(art); //got the data here

    const [image, setImage]=useState(front);   
    
    const [droppedImages, setDroppedImages]=useState([]);    

    const [{isOver}, drop]=useDrop(()=>({
        accept:'div',
        drop:(item)=>addImageToShirt(item.id),
        collect:(monitor)=>({
            isOver: !!monitor.isOver()
        })
    }))

    const addImageToShirt=(id)=>{
        console.log(id);  // got the id
        // console.log(art);  // not getting the data but when I comment and then uncomment the same console.log
        // and then when I check the browser console I am surprisingly getting the data 
        const pictureList=art.filter(newArt=>id===newArt.id);
        console.log(pictureList); // I am stuck in an really annoying issue &
        // that is console.log(pictureList) is giving me an empty array array(0) but when I comment
        // this console.log statement and then uncomment it again then in browser I will
        // get my data in console.log as array(1)       
        setDroppedImages((droppedImages)=>[...droppedImages,pictureList[0]]);
    }    

    return (
        
        <div className='viewer-box'>            
            <div className='undo-redo-box'>
                <div className='box'>
                    <div className='icon'>
                        <Icon icon={undo} size={22}/>
                    </div>
                    <div className='text'>undo</div>
                </div>
                <div className='box disabled'>
                    <div className='icon'>
                        <Icon icon={redo} size={22}/>
                    </div>
                    <div className='text'>redo</div>
                </div>
            </div>
            
            <div className='img' ref={drop}>
                <img src={image}/>
                {/* <>{droppedImages.map(img=>(
                    <div key={img.id}>
                        <img src={img.urls.full} style={{width:150+'px'}}/>
                    </div>
                ))}</> */}
            </div>
            <div className='functionalities-box'>
                <div className='box' onClick={()=>setImage(front)}>
                    <div className='icon-img'>
                        <img src={front}/>
                    </div>
                    <div className='text active'>Front</div>
                    {image===front&&(<div className='underline'></div>)}
                </div>
                <div className='box' onClick={()=>setImage(back)}>
                    <div className='icon-img'>
                        <img src={back}/>
                    </div>
                    <div className='text'>Back</div>
                    {image===back&&(<div className='underline'></div>)}
                </div>
                <div className='box'>
                    <div className='icon'>
                        
                    </div>
                    <div className='text active'>Sleeve Design</div>
                </div>
                <div className='box'>
                    <div className='icon'>
                        <Icon icon={zoomIn} size={22}/>
                    </div>
                    <div className='text active'>Zoom</div>
                </div>
            </div>
        </div>
    )
}

Answer 1

使用useDrop钩子时必须提供依赖数组，如果不提供，变量art将不会更新，我建议你看看关于闭包如何在javascript上工作​​的信息：

    const [{isOver}, drop]=useDrop(()=>({
        accept:'div',
        drop:(item)=>addImageToShirt(item.id),
        collect:(monitor)=>({
            isOver: !!monitor.isOver()
        })
    }), [art])