Javascript 动态分配的对象属性为'；页面加载时的t渲染

我正在构建一个预订应用程序，并且正在渲染一系列事件。在每个事件中，我都添加了一个动态布尔值，这取决于用户是否已经预订了事件。如果该值为真，我想禁用该按钮，如果不是，则显示它。我面临的问题是，尽管我能够为每个对象设置属性，但当我将其作为道具传递时，它无法正确渲染。相反，如果我转到第二页，然后返回，它将正确显示

const getEvents = async(user_id) =>{
    try{
        const data = await axios.get("http://localhost:5000/locations");
         var events = data.data.data;
         const isWish = 'isWish'
         events.map(el => {
               //check if it's booked
             let isSelected = checkWish(user_id, el.Id);
             (isSelected.then(function(data){
                  if(data === true){
                      el[isWish]=true;
                  } else if(data === false){
                      el[isWish]=false;
                  }
             }));
         })
         //dispatch the new objects to the reducer
        dispatch({type:GET_EVENTS, payload:events});

    } catch{

    }

}

然后在事件组件中，我调用

useffect（）

钩子并使对象脱离状态，使用

map（）

循环遍历对象，并将其作为道具传递给

EventsItem

组件，该组件将渲染每个对象

{currentPost.map（（事件）=>）}

最后，我执行必要的检查

    const EventItem = ({excursion, user}) => {

   const {Company, City, Picture, ShortDescription, Id, isWish} = excursion;
  return (
     <div>
 {isWish ? <button>I'm disabled</button> : <button>I'm disabled</button>}
    </div>
     )

const EventItem=（{shiftion，user}）=>{
const{Company，City，Picture，ShortDescription，Id，isWish}=游览；
返回(
{我的愿望？我残疾了：我残疾了}
)

因此，考虑到我在函数中进行了两次数据库调用，我决定将

调度

封装在

setTimeOut（）

中，因为我想到的唯一逻辑是，当我呈现页面时，值的加载速度不够快，而且它工作正常