Question

我一直在努力检索数据并将它们正确显示在组件中。看来我可以从后端检索数据。但是，当涉及到将其呈现到组件上时，即出现错误，即表明景点不是一个函数。

以下是我的代码：

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

Answer 1

我认为控制台的上部显示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>

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

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

1 个答案: