时间戳

首页 > 解决方案 > （反应）无法正确显示组件中的数据

reactjs - （反应）无法正确显示组件中的数据

问题描述

我一直在努力检索数据并在组件中正确显示它们。看来我可以从后端检索数据。但是在渲染到组件的时候，就报错了，说tractions.map不是一个函数。

控制台结果照片

以下是我的代码：

export function ShowAttraction(props:RouteComponentProps<{tripId:string,scheduleItemId:string}>){

    const dispatch = useDispatch();

    const attractions = useSelector((state:IRootState)=> state.attraction.attractions);
    console.log(attractions)
    const isClick = useSelector((state:IRootState)=> state.attraction.isClick);

    useEffect(()=>{
        dispatch(getAllAttractionsThunk());
        dispatch(getAllScheduleItemsThunk());
    },[dispatch])

    const renderAttractions=(i:number,key:string,attraction:IAttraction,isClick:boolean)=>{
        return <MediaCard
            attraction={attraction}
            key={key}
            value={"+"}
            attractionOnClick={()=>handleClick(i)}
            isClick={isClick} />
    }


    const handleClick=(i:number)=>{
        isClick ? deleteScheduleItemThunk(parseInt(props.match.params.scheduleItemId)) 
                : createScheduleItemThunk();
    }

    return(
        <div className="container">
            <div className="attraction-area">
                {attractions.map(attraction =>(
                    <div className="attraction-row" key={`attraction_${attraction.id}`}>
                        {
                            renderAttractions(
                                attraction.id,
                                `$attraction_${attraction.id}`,attraction,false
                            )
                        }
                    </div>
                ))}
            </div>
        </div>
    )
}

标签： reactjs

解决方案

我认为控制台的上部显示它是一个具有包含实际数组attractions的属性的对象。rows您可能可以尝试以下方法

<div className="attraction-area">
                {attractions.rows.map(attraction =>(
                    <div className="attraction-row" key={`attraction_${attraction.id}`}>
                        {
                            renderAttractions(
                                attraction.id,
                                `$attraction_${attraction.id}`,attraction,false
                            )
                        }
                    </div>
                ))}
            </div>

当然，这也可能意味着您的后端返回的对象与您的期望不同。

推荐阅读