UseEffect 不识别导入组件，不先调用

Question

我正在编写一个 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>
);

}

而我想要的是根据 rest 调用的响应动态构建选项卡数组。因此，我尝试使用 useEffect 方法，为此我将 tabsConnection 更改为状态（和默认值，无需 useEffect 方法即可工作）但根本不起作用。控制台对我说，选项卡数组中的 'content' 值未定义，就像它无法识别导入一样。

我怎样才能实现我的目标？感谢支持

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

//initialized with a default value
const [tabs, setTabs] = useState([{
    id: 'syslog',
    name: 'SYSLOG',
    content: <SyslogInput onChangeTest = {onChangeTest}  />
}]);

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

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

useEffect(()=>{
    //rest call here;

    //some logics

    var x = [{
        id: 'beats',
        name: 'BEATS',
        content: <BeatsInput onChangeTest = {onChangeTest} />
    }];

    setTabs(x);
}, []);

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

}

来自控制台的错误：

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

编辑 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>
    )
}

Answer 1

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

https://elastic.github.io/eui/#/navigation/tabs

You can also use the selectedTab and onTabClick props to take complete control over tab selection. This can be useful if you want to change tabs based on user interaction with another part of the UI.

或变通：

给标签一个空的默认值

 const [tabs, setTabs] = useState();

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

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

UseEffect 不识别导入组件，不先调用

UseEffect does not recognize imported components and is not called first

javascript

node.js

reactjs

kibana

elk