ReactJs：地图函数中的道具类型无效。 `array` 类型的无效道具 `children`

Question

Warning: Failed prop type: Invalid prop children of type array supplied to ForwardRef(ListItemIcon) , expected a single ReactElement.

in Link (at App.js:258)

in ul (created by ForwardRef(List))

in ForwardRef(List) (created by WithStyles(ForwardRef(List)))

in WithStyles(ForwardRef(List)) (at App.js:255)

in div (at App.js:249)

const sideList = side => (
        <div
          className={classes.fullList}
          role="presentation"
          onClick={toggleDrawer(side, false)}
          onKeyDown={toggleDrawer(side, false)}
        >
          <List>
            {["Домашняя страница", "Войти", "Акции", "Служба поддержки"].map(
              (text, index) => (
                <Link
                  key={index}
                  to={`${(index === 0 && "/") ||
                    (index === 1 && "/LoginPage") ||
                    (index === 2 && "/Sales") ||
                    (index === 3 && "/Contacts")}`}
                >
                  <ListItem button key={text}>
                    <ListItemIcon>
                      {index === 0 && <HomeIcon />}
                      {index === 1 && <AccountBoxIcon />}
                      {index === 2 && <MonetizationOnIcon />}
                      {index === 3 && <ContactSupportIcon />}
                    </ListItemIcon>
                    <ListItemText primary={text} />
                  </ListItem>
                </Link>
              )
            )}
          </List>
          <Divider />
          <List>
            {/* <ListItem>
              <ListItemIcon button key={"Выйти"}>
                <ExitToAppIcon />
              </ListItemIcon>
              <ListItemText primary="Выйти" />
            </ListItem> */}
            {["Выйти", `Город: ${city}`].map((text, index) => (
              <Link key={index} to={`${index === 1 && "/UserCityPage"}`}>
                <ListItem button key={text}>
                  <ListItemIcon>
                    {index === 0 && <ExitToAppIcon />}
                    {index === 1 && <LocationCityIcon />}
                  </ListItemIcon>
                  <ListItemText primary={text} />
                </ListItem>
              </Link>
            ))}
          </List>
        </div>
      );

Answer 1

I had the same issue just because the <ListItem> should be a direct child of <List> . Try to move the <Link> to be child of <ListItem> not vice versa.