类型unknown[]不能分配给类型React.ReactNode

import * as React from 'react';
import { List, ListItemButton, ListItemIcon, ListItemText, ListItem} from '@mui/material';
import LightbulbOutlinedIcon from '@mui/icons-material/LightbulbOutlined';
import NotificationsNoneOutlinedIcon from '@mui/icons-material/NotificationsNoneOutlined';
import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';

const mainListItems = () => {
    const navList = [
        { id: 1, name: 'Notes', icon: <LightbulbOutlinedIcon />},
        { id: 2, name: 'Reminders', icon:  <NotificationsNoneOutlinedIcon /> },
        { id: 3, name: 'Bin', icon: <DeleteOutlinedIcon /> },
    ]
    return (
            <List>
                {
                    navList.map( list => (
                        <ListItem key={list.id} disablePadding sx={{display: 'block'}}>
                            <ListItemButton sx={{minHeight: 48, justifyContent: open ? 'initial' : 'center', px: 2.5}}>
                                <ListItemIcon sx={{minWidth: 0, mr: open ? 3 : 'auto', justifyContent: 'center'}}>
                                    {list.icon}
                                </ListItemIcon>
                                <ListItemText primary={list.name} sx={{opacity: open ? 1 : 0}}/>
                            </ListItemButton>
                        </ListItem>
                    ))
                }
            </List>
    )
}

我尝试通过使用map来分配图标信息来减少代码量。但是它显示了这个错误，我不明白为什么会发生。我应该为列表中的属性分配类型吗?

出错行:

navList.map( list => (

完整错误信息:

类型unknown[]不能分配给类型React。ReactNode……类型unknown[]不能赋值给类型ReactElement<any,>| string | number | Iterable |Type unknown[]不能分配给Type布尔

如果任何导入都没有问题，则此代码运行良好。这里唯一的错误是mainListItems应该是MainListItems，因为所有React组件的名称都应该以大写字母开头。

错误发生是因为TypeScript不能推断map()函数的返回类型，这是一个unknown类型的数组。要解决这个问题，您可以使用ReactNode[]类型显式地键入map()的返回类型:

navList.map((list): React.ReactNode => (
  // ...
))

这告诉TypeScript, map()函数将返回一个React节点数组，这是List组件所期望的。

您需要为您的NavItems定义一个类型。然后将navList设置为NavItems Array类型。const navList: NavItem[]。
如前所述，存在公约问题;React将小写的JSX视为React元素。例如<div>, <section>等。这些是react预装的HTML标签。因此，在本例中，每当React看到小写的JSX <mainListItems>时，它将尝试将其读取为内在元素并失败。这就是为什么在<Components/>

<MainListItems/>

type NavItem = {
  id: number;
  name: string;
  icon: JSX.Element;
};
const MainListItems = () => {
  const navList: NavItem[] = [
    { id: 1, name: "Notes", icon: <LightbulbOutlinedIcon /> },
    { id: 2, name: "Reminders", icon: <NotificationsNoneOutlinedIcon /> },
    { id: 3, name: "Bin", icon: <DeleteOutlinedIcon /> }
  ];
  return (
    <List>
      {navList.map((list) => (
        <ListItem key={list.id} disablePadding sx={{ display: "block" }}>
          <ListItemButton
            sx={{
              minHeight: 48,
              justifyContent: open ? "initial" : "center",
              px: 2.5
            }}
          >
            <ListItemIcon
              sx={{
                minWidth: 0,
                mr: open ? 3 : "auto",
                justifyContent: "center"
              }}
            >
              {list.icon}
            </ListItemIcon>
            <ListItemText primary={list.name} sx={{ opacity: open ? 1 : 0 }} />
          </ListItemButton>
        </ListItem>
      ))}
    </List>
  );
};

好的，首先让我注意到的是组件的名称是以小写字母开头的。在React中命名组件时，一定要确保使用UpperCaseLetters。所以把mainListItems改成MainListItems。

第二，不要这样导入React。而不是

import * as React from 'react';

进口,

import React, {FC, Fragment, ... other imports ...} from "react"

接下来，没有提到TypeScript，但这个错误对我来说似乎是TypeScript错误，所以继续给newList分配一个类型。

我在小提琴上测试了这个，它工作得很好，请继续在你的端尝试一下。

const MainListItems = () => {
    const navList:Array<{ id: number, name: string, icon: JSX.Element }> = [
        { id: 1, name: 'Notes', icon: <LightbulbOutlinedIcon />},
        { id: 2, name: 'Reminders', icon:  <NotificationsNoneOutlinedIcon /> },
        { id: 3, name: 'Bin', icon: <DeleteOutlinedIcon /> },
    ]
    return (
            <List>
                {
                    navList.map( list => (
                        <ListItem key={list.id} disablePadding sx={{display: 'block'}}>
                            <ListItemButton sx={{minHeight: 48, justifyContent: open ? 'initial' : 'center', px: 2.5}}>
                                <ListItemIcon sx={{minWidth: 0, mr: open ? 3 : 'auto', justifyContent: 'center'}}>
                                    {list.icon}
                                </ListItemIcon>
                                <ListItemText primary={list.name} sx={{opacity: open ? 1 : 0}}/>
                            </ListItemButton>
                        </ListItem>
                    ))
                }
            </List>
    )
}

如果这不起作用，并且你没有使用TypeScript，继续删除package-lock.json和node_modules，并再次运行npx install，看看是否解决了你的错误。

相关内容

最新更新

热门标签：