從Redux狀態屬性渲染React組件

Question

所以，我有這個特定的錯誤：

未捕獲錯誤：對象無效作為React子對象（找到：具有鍵{name，component，accessible，is_showed，is_rendered}的對象）。 如果您要渲染子集合，請使用數組，或使用React附加組件中的createFragment（object）包裝對象。 檢查Base的render方法。

我有一個Redux狀態，如下所示：

export const initialState = {
    links: [{
        name: 'search_files',
        component: <SearchFile/>,
        accessible: true,
        is_showed: true,
        is_rendered: false
    },
        {
            name: 'invisible_link',
            component: <SearchFile/>,
            accessible: false,
            is_showed: true,
            is_rendered: false
        }
    ],
    user: {
        username: '',
        password: '',
        is_logged: false,
        has_rights: false,
        errors: {
            summary: '',
            username: '',
            password: ''
        }
    },
    panel: {toggled: false}
};

我的目的是呈現每個鏈接的component屬性指向的component 。 目前，兩個鏈接的組件是相同的，它是“正常的”。

Base組件如下所示：

class Base extends React.Component {

    render() {
        let toRender = null;

        if (!this.props.state.user.is_logged)
            toRender = <LoginFormRender/>;
        else
        {
            toRender = this.props.state.links.find(link => {
                if (link.is_rendered) {
                    console.log(link.component);
                    return (link.component);
                }
            })
        }
        return (
            <div>
                <TopBarApp/>
                <LeftPanel/>
                {toRender}
            </div>
        )
    }
}

export default Base;

LoginFormRender渲染得很好，但錯誤在這里：

else
        {
            toRender = this.props.state.links.find(link => {
                if (link.is_rendered) {
                    console.log(link.component);
                    return (link.component);  <==== HERE
                }
            })
        }

我明白我明顯不能這樣做（但是，它仍然可以在var中存儲一個組件，因為LoginFormRender工作）但我無法弄清楚如何實現這一點......有人知道嗎？ 我無法找到任何回答我問題的問題。

提前致謝

Answer 1

問題是，您正在使用Array.prototype.find（） ，如果元素通過測試，它將始終返回數組中的值，否則返回undefined。 它不會返回您從正文返回的項目。

根據MDN DOC ：

find（）方法返回數組中第一個滿足提供的測試函數的元素的值。 否則返回undefined。

檢查此代碼段：

 let a = [{a:1}, {a:2}]; let p = a.find(el => {if(el.a > 1) return 10;}); console.log('p = ', p); 

即使我返回10，但p將具有的值是{a: 2} 。

解決您的問題：

在你的情況下， toRender在循環后會有這個值：

{
      name: 'invisible_link',
      component: <SearchFile/>,
      accessible: false,
      is_showed: true,
      is_rendered: false
}

這就是它拋出錯誤的原因：

對象作為React子對象無效（找到：具有鍵{name，component，accessible，is_showed，is_rendered}的對象）。

因此，不要渲染{toRender}渲染：

{toRender.component}

或者像這樣寫循環：

else{
    this.props.state.links.find(link => {
        if (link.is_rendered) {
            toRender = link.component;
            return 1;
        }
    })
}

Answer 2

State用於獲取有關當前應用程序數據結構的信息，但不應包含其中的組件。 您應該在render()函數中渲染組件。

你的render()看起來像這樣

render() {
    return (
        <div>
            <TopBarApp/>
            <LeftPanel/>

            {this.props.state.user.is_logged ? (
                // Render menu links here
                <SearchFile/>
            ) : (
                <LoginFormRender/>
            )}
        </div>
    )
}