时间戳

首页 > 解决方案 > 使用 React Hooks 构建的 React Div 面板引发违规：元素类型无效

javascript - 使用 React Hooks 构建的 React Div 面板引发违规：元素类型无效

问题描述

这个 React div 面板是使用 React hooks 构建的，旨在与拖放功能一起使用。但是，它会引发 Invariant Violation: Element Type Invalid on rendering。

该面板是用 Meteor 中的 react hooks 构建的，如下所示。

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, 0, 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>

执行并尝试在页面中呈现面板会导致以下错误：

Uncaught Invariant Violation：元素类型无效：期望字符串（对于内置组件）或类/函数（对于复合组件）但得到：对象。

检查ProjectItemsPanel.

更改为此导入无效：

import {ProjectItemsPanel} from './ProjectItemsPanel.js';

标签： javascriptreactjsmeteor

解决方案

由于您遵循命名导出，因此导入组件的正确方法是：

import {ProjectItemsPanel} from './ProjectItemsPanel.js';

<ProjectItemPreview/>此外，通过查看代码，您在此文件中导入的子组件也可能存在问题。

如果 的导入方法<ProjectItemPreview/>错误，会导致和你上面提到的一样的错误。

推荐阅读