Question

所以，我有这个特定的错误：

未捕获错误：对象作为React子对象无效（找到：具有键{name，component，accessible，is_showed，is_rendered}的对象）。如果您要渲染子集合，请使用数组，或使用React附加组件中的createFragment（object）包装对象。检查Base的呈现方法。

我的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属性指向的组件。目前，两个链接的组件相同，它是正常的＆＃34;。

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()并且如果元素通过测试，它将始终返回数组中的值，否则将是未定义的。它不会返回您从正文中返回的项目。

根据MDN DOC：

find（）方法返回数组中第一个元素的值满足提供的测试功能。否则未定义返回。

检查此代码段：

＆＃13;

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

＆＃13;

即使我返回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

状态用于获取有关当前应用程序数据结构的信息，但它不应包含组件。您应该在render()函数中呈现组件。

您的render()看起来像这样

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

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

从Redux状态属性渲染React组件

2 个答案: