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 方法，為此我用 state （和一個默認值，在沒有 useEffect 方法的情況下工作）更改 tabsConnection 但根本不起作用。 控制台對我說，選項卡數組中的“內容”值是未定義的，就像它無法識別導入一樣。

我怎樣才能實現我的目標？ 感謝您的支持

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

您還可以使用 selectedTab 和 onTabClick 屬性來完全控制選項卡的選擇。 如果您想根據用戶與 UI 的另一部分的交互來更改選項卡，這會很有用。

或解決方法：

1. 給標簽一個空的默認值

 const [tabs, setTabs] = useState();

2. 圍繞標簽有條件地渲染組件

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