Question

我想遍历数组中的每个元素，并将其显示在面包屑导航中。

我要做什么？从特定路径或位置说/ list / item_id，如果该项目具有某些信息，我的导航导航应更改为信息层次结构。例如，假设我将项目的信息存储在item_information中，并且它是如下所示的对象数组，

const item_information = [
{
    name: "c_name",

},
{
    name: "a_name",
},
{
    name: "name",
}

我只想获取每个对象的名称，并将其存储在变量显示中，并希望在面包屑导航中显示它。...以便使用.map函数从变量显示中循环遍历每个名称值。这样做，我得到一个错误.map不是一个函数。

下面是代码，

class Crumb extends React.PureComponent {

render = () => {
    const link = this.props.link;
    let display;
    let match;
    let after_link;
    if (link === '/') {
        display = 'Home';

    } else if (match = link.match(/^\/list\/new$/)) {
        display = 'new item';

    } else if (match = link.match(/^\/list\/([^/]+)$/)) 
        if (this.props.item_information > 0) {
            display = this.props.item_information.map((el) => {
                return el.name;
            });
        } else {
            const model_id = match[1];
            const model = this.props.models && this.props.models.find(model 
                   => '' + model.id === model_id);
            display = itemname;
                after_link = 'after_link';
          }
    }

    //last part of the link
    if (!display) {
        const parts = link.split('/');
        display = parts[parts.length - 1];
    }
  return (
        <div>
            {Array.isArray(display) && display.map((display) => {
                return (
                    <div className="crumb">
                    <Link to={link}>{display}</Link>
                         </div>
                );
            })}
            <div className="crumb">
                <Link to={link}>{display}</Link>
            </div>
            {after_link}</div>

    );
};

}

class Breadcrumb extends React.PureComponent {
render = () => {
    const path = this.props.location.pathname;
    const crumbs = [];
    path.split('/').slice(1).forEach((part, index, parts) => {
        crumbs.push('/' + parts.slice(0, index + 1).join('/'));
    });
    return (
        <div className="breadcrumb">
            {crumbs.map((link, i) => {
                return (
                    <Fragment key={link}>
                        <Crumb
                            item_information={this.props.item_information}/>
                    </Fragment>);
            })}
        </div>
    );
};

}

有人可以帮助我摆脱错误.map不是函数。谢谢。

遍历数组给出.map在reactjs中不是函数错误

0 个答案: