时间戳

首页 > 解决方案 > TypeError：TestsList 不可迭代

javascript - TypeError：TestsList 不可迭代

问题描述

我正在尝试使用语义 UI 反应中的选项卡组件并面临此错误。我知道你只能从这样的函数返回 jsx/react 组件，但正如你所见，我需要来自语义 UI 反应的 Tab 组件所需的列表。无论如何，我都需要上下文变量来执行此操作。

有人建议只render:通过函数返回方法的 jsx 并使用钩子，但 menuItem:仍然需要上下文。



TypeError: TestsList is not iterable
./src/components/SideBar/TestsMenu.js/<
C:/Users/Dell/OneDrive/Desktop/niroggyan/nirogyan/src/components/SideBar/TestsMenu.js:72

  69 | 
  70 | 
  71 | 
> 72 | const TestsMenu = [TestsHeader, ...TestsList]
  73 | 
  74 | export default TestsMenu;
  75 | 

TestsMenu.js

import { Header, Button, Message, Tab } from "semantic-ui-react";
import TestDetails from "../FormComponents/TestDetails";
import { TestContext, TabContext } from "../Main";
import { useContext } from "react";
import { useFormContext } from "react-hook-form";
import AddTestButton from "../FormComponents/AddTestButton";
import Search from "./SearchItem";


const TestsHeader = {
    menuItem: {
        header: true,
        content: (
            <>
                <Header as="h3">Tests</Header>{" "}
                <Search />
            </>
        ),
        active: false,
        disabled: true,
    },
    render: () => <Tab.Pane key={"Tests Heading"}></Tab.Pane>,
};

const TestsList = () => {
    const { testList, setTestList } = useContext(TestContext);
    const { setCurrentTabIndex } = useContext(TabContext)
    const { unregister } = useFormContext();

    const handleTestDeletion = (e, testID) => {
        const filterDict = (dict, filterFunc) =>
            Object.fromEntries(Object.entries(dict).filter(filterFunc));

        setTestList((state) => filterDict(state, ([key, val]) => key !== testID));

        unregister(`patient.tests.${testID}`);
        setCurrentTabIndex(0);
    };


    return Object.keys(testList).map((testID) => {
        return {
            menuItem: { content: testList[testID].text, color: "violet" },

            render: () => (
                <Tab.Pane key={testList[testID].text}>
                    <Message
                        attached
                        header="Test Details"
                        content="Fill out the test details."
                    />
                    <TestDetails testID={testID} />
                    <AddTestButton />
                    <Button
                        color="red"
                        type="button"
                        onClick={(event) => handleTestDeletion(event, testID)}
                    >
                        Remove test
                    </Button>
                    <Button color="violet" type="submit">
                        Submit
                    </Button>
                </Tab.Pane>
            ),
        };
    })
}



const TestsMenu = [TestsHeader, ...TestsList]

export default TestsMenu;

-----------------------------------------

Patients.js
//  like TestsMenu.js
----------------------------------------

Main.js

const Main = () => {
  // some code

  const menuItems = [...ProfileMenu, ...TestsMenu];
  return <>
          <Tab
                menu={{ fluid: true, vertical: true, tabular: true }}
                panes={menuItems}
                activeIndex={currentTabIndex}
                onTabChange={(e, { activeIndex }) => {
                  setCurrentTabIndex(activeIndex);
                }}
              />
        
</>
}

编辑：

答案从 gui 中删除了错误，但没有太大帮助，因为收到的数组 TestsMenu 的形式为 [Object, a function]，因此当我添加新测试时，它在侧边栏中不可见。

密码沙盒

标签： javascriptreactjssemantic-ui-react

解决方案

TestsList是一个函数。您不能将它传播到像[TestsHeader, ...TestsList]. 应该是[TestsHeader, ...TestsList()]。

根据Tab组件的语义-ui-react 文档，panes道具应该是以下类型的对象数组

{
"menuItem":"custom",
"pane":"custom",
"render":"function"
}

您的函数TestList返回上述对象的数组。所以你只需要调用函数TestList并像这样传播它[TestsHeader, ...TestsList()]

推荐阅读