尝试保存状态时，Axios 响应返回空数组或未定义，而仅在控制台日志记录时返回有效响应

Question

这个问题是附加到axios响应工作时不保存状态响应和设置状态失败时的附加问题。

我的问题没有得到真正的答案，我想我应该举一些例子。

我不明白为什么当我打印我的响应时我看到了结果，但是当我尝试将它保存在一个状态中时我得到一个空数组（在响应本身中这意味着我的新状态将是一个空数组到...)

我通过互联网进行了研究，我发现的只是人们没有按照应有的方式使用 Promise 的例子，因此无法保存响应，但可以打印它。

我的代码：

useEffect(() => {
       props.getAllOpen.then(res => {
           let check = res.data.data;
           console.log(check); or [console.log(res.data.data)]
       });
},[]);

控制台结果：

Array(2)

0: {Stations: Array(2), _id: "60c5be4be3f2262294dff893", Type: "d"}  
1: {Stations: Array(2), _id: "60c5be4be3f2262294dff892", Type: "d"}

我的问题：

const [Data,setData] = useState([]);
useEffect(() => {
       props.getAllOpen.then(res => {
           setData(res.data.data);
           console.log(res.data.data);
       });
},[]);

控制台结果：

[]

我做错了什么？

任何帮助将不胜感激。

感谢您花时间帮助我:)

完整组件：

import {React,useEffect,useState} from 'react';
let dateFormat = require('dateformat');
const NotificationTable = (props)=>{
const [Data,setData] = useState([]);
    useEffect(()=>{
       props.getAllOpen.then(res=>{
        setData(res.data.data);
       });
   },[]);
        
    // get date return true if the date is the date of current day
    function isSameDay(date) {
        let today = new Date();
        if(today.getMonth()===date.getMonth() && today.getFullYear()===date.getFullYear() 
        && today.getDay()=== date.getDay())
            return true;

        return false;
    }
    return(
            <div className = "Notification-Table">
                <div className  = "Row"> <div className = "Header-Cell">end date</div><div className = "Header-Cell">start date</div> <div className = "Header-Cell">duplicate</div> <div className = "Header-Cell">סוג</div> <div className = "Header-Cell">s</div></div>
                { [...Data.filter(e=>e.Close==="1970-01-01T00:00:00.000Z").splice(0,21),...Array(22-Data.filter(e=>e.Close==="1970-01-01T00:00:00.000Z").splice(0,21).length)].map((d,index)=>{
                    if(d)
                   { 
                    return(<div key = {d._id} className  = "Row"> 
                    <div className = "Cell">{new Date(d.Close).getFullYear()===1970?"Live":isSameDay(new Date(d.Close))?dateFormat(new Date(d.Close),"HH:MM:ss"):dateFormat(new Date(d.Close),"dd-mm-yyyy")}</div>
                    <div className = "Cell">{isSameDay(new Date(d.Open))?dateFormat(new Date(d.Open),"HH:MM:ss"):dateFormat(new Date(d.Close),"dd-mm-yyyy")}</div>
                    <div className = "Cell">{d.Duplicate}</div>
                    <div className = "Cell">{d.Type}</div> 
                    <div className = "Cell">{d.Stations}</div>
                    </div>);}
                    else
                   {
                       return(<div key = {index} className  = "Row"> 
                    <div className = "Empty-Cell"></div>
                    <div className = "Empty-Cell"></div>
                    <div className = "Empty-Cell"></div>
                    <div className = "Empty-Cell"></div> 
                    <div className = "Empty-Cell"></div>
                    </div>);}
                    })}
            </div>
);
};

export default NotificationTable;

axios 请求：

export const getAllOpenNotification = ()=> api.get('/opennotifications');

猫鼬查询：

getOpenNotification = async (req, res) => {
    await Notification.find({Close:"1970-01-01T00:00:00.000Z"}, (err, notifications) => {
        if (err) {
            return res.status(400).json({ success: false, error: err });
        }
        if (!notifications.length) {
            return res
                .status(200)
                .json({ success: true,data:[],error: `Open Notification not found` });
        }
        return res.status(200).json({ success: true, data: notifications });
    }).catch(err => console.log(err));
};

路线：

router.get('/opennotifications',getOpenNotification);

Answer 1

在无法访问您的存储库的情况下很难为您提供准确的解决方案，但我在不创建深层副本时遇到了这个问题。

尝试下面的示例。

const [data,setData] = useState([]);

useEffect(()=>{
    props.getAllOpen.then(res=>{
    setData([...res.data.data]);
    console.log(res.data.data);
 });
},[]);

console.log('Data: ', data);
// Return something
return ();

Answer 2

你没有做错什么，但是 console.log() 是异步函数。因此，当您打印 res.data.data 时，打印可能会在分配之前完成。所以即使分配已经完成，你也会得到一个空数组。

要解决此问题，您可以查看此处。