Question

我正在构建预订应用程序，并且有很多正在渲染的事件。在每个事件中，我都添加了一个动态布尔值，该值将取决于用户是否已经预订了该事件。如果值为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()遍历它们，并将其作为道具传递给{{1} }组件，它将渲染每个对象。

EventsItem

最后我执行必要的检查

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

Answer 1

因此，考虑到我正在函数内部进行两个数据库调用，因此我决定将dispatch包装在setTimeOut()内，因为我想到的唯一合乎逻辑的事情是值呈现页面时加载速度不够快，并且可以正常工作！

动态分配的对象属性不会在页面加载时呈现

1 个答案: