Uncaught TypeError: (intermediate value)(intermediate value)(intermediate value).map is not a functi-CodePudding

When I render an array of objects and try to render component inside map function is gives me this error: Uncaught TypeError: (intermediate value)(intermediate value)(intermediate value).map is not a function The problem occurs here:

{comments.map((obj, i) => (
        <CommentsBlock
          key={i}
          items={{
            user: {
              fullName: obj?.user?.fullName,
              avatarUrl: obj?.user?.avatarUrl,
            },
            text: obj?.text,
          }}
          isLoading={false}
          id={obj._id}
          isEditable={userData._id == obj.user._id}
        ><Index /></CommentsBlock>
      ))}

CommentBlock component:

export const CommentsBlock = ({
  id,
  items,
  children,
  isLoading = true,
  isEditable = false,
}) => {
  const dispatch = useDispatch();
  const onClickRemove = () => {
    if (window.confirm("Вы действительно хотите удалить статью?")) {
      //dispatch(fetchRemovePosts(id));
    }
  };

  return (
    <SideBlock title="Комментарии">
      <List>
        {(isLoading ? [...Array(5)] : items).map((obj, index) => (
          <React.Fragment key={index}>
            <ListItem alignItems="flex-start">
              <ListItemAvatar>
                {isLoading ? (
                  <Skeleton variant="circular" width={40} height={40} />
                ) : (
                  <Avatar alt={obj.user.fullName} src={obj.user.avatarUrl} />
                )}
              </ListItemAvatar>
              {isLoading ? (
                <div style={{ display: "flex", flexDirection: "column" }}>
                  <Skeleton variant="text" height={25} width={120} />
                  <Skeleton variant="text" height={18} width={230} />
                </div>
              ) : (
                <ListItemText
                  primary={
                    <Typography
                      style={{
                        display: "flex",
                        justifyContent: "space-between",
                      }}
                    >
                      {obj.user.fullName}
                      {isEditable ? (
                        <IconButton color="secondary" style={{ padding: 0 }}>
                          <DeleteIcon />
                        </IconButton>
                      ) : (
                        ""
                      )}
                    </Typography>
                  }
                  secondary={obj.text}
                />
              )}
            </ListItem>
            <Divider variant="inset" component="li" />
          </React.Fragment>
        ))}
      </List>
      {children}
    </SideBlock>
  );
};

array comment comes from here

const comments = useSelector((state) => state.comment.data);

that's how comments looks like

So i expect to render these elements

CodePudding user response：

(isLoading ? [...Array(5)] : items).map((obj, index)

This line looks very suspicious. You receive loading as prop and set true, and if loading is true [...Array(5)] will be

[undefined, undefined, undefined, undefined, undefined]

Usually, you want to display some loader, if the loading is true. And then below you use obj.user.fullName, but you map over an array with 5 undefineds, so you get

undefined.user.fullName

This is what I can tell from the code, if you add the code to some sandbox and share, I may help more, I don't see the full picture.

CodePudding user response：

You're passing items as object thru CommentsBlock component props, but in List component you're trying to access as array here: {(isLoading ? [...Array(5)] : items).map((obj, index) => ( which is the reason behind error. Can not run map on object.

So either pass the items as arrau or just access as object directly.

[...Array(5)] is producing array with empty value (undefined) where items is object which not iterable thu map.

Thanks.