时间戳

首页 > 解决方案 > 动态分配的对象属性未在页面加载时呈现

javascript - 动态分配的对象属性未在页面加载时呈现

问题描述

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

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{

    }

}

然后在事件组件中，我调用useEffect()钩子并让对象脱离状态，用 循环遍历它们，map()并将它作为EventsItem要渲染每个对象的组件传递。

{currentPost.map((event) =><EventItem excursion={event} user={user}></EventItem>)}

最后我进行必要的检查

    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>
     )

标签： javascriptreactjsreact-hooks

解决方案

因此，考虑到我在函数内部进行了两次数据库调用，我决定将dispatch内部 a包装起来，setTimeOut()因为我想出的唯一合乎逻辑的事情是，当我呈现页面时，该值的加载速度不够快它奏效了！

推荐阅读