从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>
    )
}