问题:使用从另一个映射数组获得的索引显示对象数组中的数组元素

正如标题所示,我正在尝试使用从另一个单独数组获得的索引从数组中获取对象。我收到错误:未捕获的类型错误:场所[index].map 不是函数。

venues = [
     {id: 4, title: "bro"}, {id: 5, title: "np bro"} 
   ]
   
   cityArray = [4, 5, 5, 4, 5, 5]

上面是场地和cityArray。

我正确地得到了索引。调度工作正常。

const Home = () => {
    const { city } = useParams();
  
    const featured = useSelector((state) => state.featuredList.featured);
   
    const venues = useSelector((state) => state.venueList.venues);

    useEffect(() => {   
        dispatch(listVenues())
    }, [dispatch])


    useEffect(() => {
        dispatch(listFeatured())
    }, [dispatch])

  
    useEffect(() => {
        if (city === "perth") {
           setCityArray(featured?.featured_perth)
        }
    }, [featured, city]) 
    
    return (
        <GridWrapper>
            {cityArray?.map((i) => {
                 var index = venues?.findIndex(ar => parseInt(ar.id) === i);
                     return (
            
                        <div>
                          {venues[0].map(arr => 
                              (
                                <div>
                                   <h1>{arr.title}</h1>
                                </div>
                               )
                           )}
                        </div>    
                            )   
                        }
                            
                        
                        )}
        </GridWrapper>
    )
}

export default Home;

解答

您的错误Uncaught TypeError: venues[index].map is not a function是因为venues[index]指的是对象而不是数组,并且对象没有实现map方法。

如果您想继续单独查找每个对象,您可以简单地使用find()而不是findIndex()来返回对象本身。 (您可能也应该考虑未找到的元素)。

return (
  <GridWrapper>
    {cityArray?.map((i) => {
      var venue = venues?.find((ar) => parseInt(ar.id) === i);
      return (
        <div>
          <h1>{venue.title}</h1>
        </div>
      );
    })}
  </GridWrapper>
);

但是如果你要重复这样做,你应该创建一个Map或由id索引的对象并直接访问它。

const venues = [
  { id: 4, title: "bro" },
  { id: 5, title: "np bro" }
];
const cityArray = [4, 5, 5, 4, 5, 5];

const venueMap = new Map(venues.map(v => [v.id, v]));

return (
  <GridWrapper>
    {cityArray?.map((id) => {
      const venue = venueMap.get(id);
      return (
        <div>
          <h1>{venue.title}</h1>
        </div>
      );
    })}
  </GridWrapper>
);