在 React 中第一次没有从 nodejs 服务器获取数据

Question

我正在尝试从Nodejs 服务器获取图像。每当我第一次刷新页面或打开它时，数据都没有存储在 React state 变量中，因此状态值给出了 null，因此我无法在客户端显示图像.

这是我的 React 代码：

const Images = ()=>{
    const [images,setImages] = useState([]);
    var res=[];
    useEffect(()=>{
        function fetchData(){
            instance.get('/Index/getphoto')
            .then(res=>{
                console.log(res);
                setImages(res.data);
                console.log(images);
            })
            
        }
        fetchData();
    },[])
    return(
        <>
            {
                images.map((item)=>{
                    return(
                        <div key={item.id}>
                        <img src={`http://localhost:3000/${item.img}`} alt="anything" />
                        </div>
                    )
                })
                
            }
        </>
    );
}

在上面的fetchData 函数中，我从端点获取所有数据，但是当我尝试使用setImages(res.data) 将这些数据存储在images 状态变量中时，它没有存储在那里，我得到了在我的控制台中出现以下结果：

Answer 1

在 React 中设置状态是 asynchronous，因此设置状态后，您将无法立即在下一行看到您的 images。

useEffect(() => {
   function fetchData(){
       instance.get('/Index/getphoto')
       .then(res=>{
           console.log(res);
           setImages(res.data);
       })
    }
    fetchData();
}, [])
// Moved this log outside useEffect
console.log(images);

关于您收到的警告与unique keys 相关，是因为您使用的是map 而不是images，因此您需要为map 中的每个元素分配唯一键。
在您的情况下，您使用的是item.id，因此只需确保所有图像的 id 都是唯一的，否则它将无法按预期运行。

 <div key={item.id}>

参考资料 -

1. ReactJS : What is the best way to give keys in array element
2. Why calling react setState method doesn't mutate the state immediately?
3. Correct path for img on React.js
4. React won't load local images