如何解决使用React Hooks构建的React Div面板会违反:元素类型无效
此React div面板是使用React钩子构造的,旨在具有拖放功能。但是,它会引发不变的违规:元素类型在渲染时无效。
该面板在Meteor中构建有react挂钩,如下所示。
import React,{ useState,useCallback } from 'react';
import update from 'immutability-helper';
import ProjectItemPreview from './ProjectItemPreview.js';
export const ProjectItemsPanel = () => {
{
//const [cards,setCards] = defineInitialState(props.projectID);
const [cards,setCards] = useState([
{
id: 1,text: 'Write a cool JS library',},{
id: 2,text: 'Make it generic enough',{
id: 3,text: 'Write README',{
id: 4,text: 'Create some examples',{
id: 5,text:
'Spam in Twitter and IRC to promote it (note that this element is taller than the others)',{
id: 6,text: '???',{
id: 7,text: 'PROFIT',]);
const moveCard = useCallback(
(dragIndex,hoverIndex) => {
const dragCard = cards[dragIndex];
setCards(
update(cards,{
$splice: [
[dragIndex,1],[hoverIndex,dragCard],],}),);
},[cards],);
const renderCard = (card,index) => {
return (
<ProjectItemPreview
key={card.id}
index={index}
id={card.id}
text={card.text}
moveCard={moveCard}
/>
);
};
return (
<div>{cards.map((card,i) => renderCard(card,i))}</div>
);
}
};
export default ProjectItemsPanel;
按如下方式使用EditProject.js中的组件:
import ProjectItemsPanel from './ProjectItemsPanel.js';
...
<DndProvider backend={HTML5Backend}>
<ProjectItemsPanel />
</DndProvider>
执行并尝试在页面中呈现面板会导致以下错误:
未捕获的不变变量:元素类型无效:预期a 字符串(对于内置组件)或类/函数(对于复合 组件),但得到了:对象。
检查
ProjectItemsPanel
的呈现方法。
更改为该导入无效:
import {ProjectItemsPanel} from './ProjectItemsPanel.js';
解决方法
由于您使用的是命名导出,因此导入组件的正确方法是:
import {ProjectItemsPanel} from './ProjectItemsPanel.js';
另外,通过查看代码,也可能是子组件<ProjectItemPreview/>
的问题,您已在该文件中导入了子组件。
如果<ProjectItemPreview/>
的导入方法错误,将导致与上述错误相同的错误。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。