TypeError: TestsList is not iterable

Question

我正在尝试使用来自 semantic-ui-react 的 Tab Component 并遇到此错误。我知道你只能 return jsx/react 来自这样一个函数的组件，但正如你所看到的，我需要那个列表，该列表对于语义 - [=29 的 Tab 组件来说是 required =]-反应。无论如何我都需要上下文变量来做到这一点。

有人建议仅通过函数 return 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]，因此当我添加新测试时，它在边栏中不可见。

CodeSand Box

Answer 1

TestsList 是一个函数。您不能将它散布在像 [TestsHeader, ...TestsList] 这样的数组中。应该是[TestsHeader, ...TestsList()].

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

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

您的函数 TestList returns 上述对象的数组。所以你只需要调用函数 TestList 并像 [TestsHeader, ...TestsList()]

一样传播它

Answer 2

必须按以下方式进行。没有其他事情在工作。钩子和 handleTestDeletion 必须移至 Main.js

import { Header, Button, Message, Tab } from "semantic-ui-react";
import TestDetails from "../FormComponents/TestDetails";
import AddTestButton from "../FormComponents/AddTestButton";
import Search from "./SearchItem";


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

const getTestList = (testList, handleTestDeletion) => {

    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 getTestMenu = (testList, handleTestDeletion) => {
    return [getTestHeader(), ...getTestList(testList, handleTestDeletion)]
}

export default getTestMenu;

TypeError: TestsList is not iterable

TypeError: TestsList is not iterable

javascript

reactjs

semantic-ui-react