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

Question

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

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;

Answer 1

由于venues是一个对象数组，您应该能够通过以下方式访问 title 属性：

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

Answer 2

Your error Uncaught TypeError: venues[index].map is not a function is because venues[index] refers to an object not an array and objects don't implement a map method.

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

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

但是，如果您要重复执行此操作，您应该创建一个由id索引的Map或 object 并直接访问它。

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