Javascript UseEffect无法识别导入的组件，因此不会首先调用

我正在编写一个kibana插件，而我的弹出组件有一些问题。这是我的起始代码：

export const InputPipelineDebugger = ({queryParams, setQueryParams, setConnectionType, setMessage}) => {

const onChangeTest = (e) => {
   setMessage(e.target.value);
}

const onTabConnectionTypeClicked = (tab) => {
    setConnectionType(tab.id);
}



var tabsConnection = [
    {
        id: 'http',
        name: 'HTTP',
        content: <HttpInput onChangeTest = {onChangeTest} queryParams = {queryParams} setQueryParams={setQueryParams} />
    },
    {
        id: 'syslog',
        name: 'SYSLOG',
        content: <SyslogInput onChangeTest = {onChangeTest}  />
    },
    {
        id: 'beats',
        name: 'BEAT',
        content: <BeatsInput onChangeTest = {onChangeTest} />
    }
];

return (
    <EuiFlexItem>
        <h3>Input</h3>
        <EuiTabbedContent
            tabs={tabsConnection}
            initialSelectedTab={tabsConnection[0]}
            autoFocus="selected"
            onTabClick={tab => {
                onTabConnectionTypeClicked(tab);
            }} />
    </EuiFlexItem>
);

编辑1

下面是BeatsInput和SyslogInput的代码：

    import {
    EuiText,
    EuiTextArea,
    EuiSpacer,
    EuiFlexItem,
} from '@elastic/eui';

import React, { Fragment, useState } from 'react';

export const SyslogInput = ({onChangeTest}) => {
    return (
        <EuiFlexItem>
            <EuiFlexItem >
                <EuiSpacer />
                <EuiText >
                    <EuiTextArea fullWidth={true}
                        style={{ height: "450px" }}
                        onChange={e => onChangeTest(e)}
                        placeholder="Scrivi l'input"
                    />
                </EuiText>
            </EuiFlexItem>
        </EuiFlexItem>
    )
}

import {
    EuiText,
    EuiTextArea,
    EuiSpacer,
    EuiFlexItem,
} from '@elastic/eui';

import React, { Fragment, useState } from 'react';

export const BeatsInput = ({onChangeTest}) => {
    return (
        <EuiFlexItem>
            <EuiFlexItem >
                <EuiSpacer />
                <EuiText >
                    <EuiTextArea fullWidth={true}
                        style={{ height: "450px" }}
                        onChange={e => onChangeTest(e)}
                        placeholder="Scrivi l'input"
                    />
                </EuiText>
            </EuiFlexItem>
        </EuiFlexItem>
    )
}

导入{
尤伊特，
EuittextArea，
尤伊斯帕瑟，
优福利欣，
}来自“@elastic/eui”；
从“React”导入React，{Fragment，useState}；
导出常量SyslogInput=（{onChangeTest}）=>{
返回(
onChangeTest（e）}
占位符=“Scrivi l'input”
/>
)
}
进口{
尤伊特，
EuittextArea，
尤伊斯帕瑟，
优福利欣，
}来自“@elastic/eui”；
从“React”导入React，{Fragment，useState}；
导出常量BeatsInput=（{onChangeTest}）=>{
返回(
onChangeTest（e）}
占位符=“Scrivi l'input”
/>
)
}

将initialSelectedTab更改为selectedTab[或仅将其添加到]

您还可以使用选定的选项卡和 ontab单击道具以完全控制选项卡选择。这个可以 如果要根据用户与的交互更改选项卡，请使用此选项 UI的另一部分

或解决以下问题：

为选项卡指定一个空的默认值

围绕选项卡有条件地呈现组件

{tabs&&(
{
onTabConnectionTypeClicked（选项卡）；
}}
/>
)}

当我复制此项时，唯一的警告是onChangeTest在声明之前在useState中通过；您能否验证useEffect和BeatsInput是否已导入？如果您在useEffect中添加了console.log X，它会输出吗？如果您可以添加InputPipelineDebugger的导入以及BeatsInput组件，这将非常有用。我已经用请求的代码编辑了线程。useEffect和BeatsInput已导入，console.log输出正确。我也尝试过useLayoutEffect，但它不起作用。能否添加EuitabedContent？这是最后的坚持；我没看到上面有什么奇怪的。你救了我一天！来真的真的谢谢你，帕夫洛斯！

Uncaught TypeError: Cannot read property 'content' of undefined
at EuiTabbedContent.render

    import {
    EuiText,
    EuiTextArea,
    EuiSpacer,
    EuiFlexItem,
} from '@elastic/eui';

import React, { Fragment, useState } from 'react';

export const SyslogInput = ({onChangeTest}) => {
    return (
        <EuiFlexItem>
            <EuiFlexItem >
                <EuiSpacer />
                <EuiText >
                    <EuiTextArea fullWidth={true}
                        style={{ height: "450px" }}
                        onChange={e => onChangeTest(e)}
                        placeholder="Scrivi l'input"
                    />
                </EuiText>
            </EuiFlexItem>
        </EuiFlexItem>
    )
}

import {
    EuiText,
    EuiTextArea,
    EuiSpacer,
    EuiFlexItem,
} from '@elastic/eui';

import React, { Fragment, useState } from 'react';

export const BeatsInput = ({onChangeTest}) => {
    return (
        <EuiFlexItem>
            <EuiFlexItem >
                <EuiSpacer />
                <EuiText >
                    <EuiTextArea fullWidth={true}
                        style={{ height: "450px" }}
                        onChange={e => onChangeTest(e)}
                        placeholder="Scrivi l'input"
                    />
                </EuiText>
            </EuiFlexItem>
        </EuiFlexItem>
    )
}

 const [tabs, setTabs] = useState();

{tabs && (
        <EuiTabbedContent
          tabs={tabs}
          initialSelectedTab={tabs[0]}
          autoFocus="selected"
          onTabClick={tab => {
            onTabConnectionTypeClicked(tab);
          }}
        />
      )}