无法读取未定义 reactjs 的属性“地图”

Question

我正在使用带有相同代码的 fabric-react commandBar 组件： fabric-ui-commandbar

但我在运行时收到以下错误。

Uncaught TypeError: Cannot read property 'map' of undefined 

而我的代码如下：

import * as React from 'react';
import { assign } from 'office-ui-fabric-react/lib/Utilities';
import { CommandBar } from 'office-ui-fabric-react/lib/CommandBar';
import { Toggle } from 'office-ui-fabric-react/lib/Toggle';

export class MyPage extends React.Component<any, any> {

  constructor(props: any) {
    super(props);
    this.state = {
      isSearchBoxVisible: true,
      areNamesVisible: true,
      areIconsVisible: true
    };
  }

  public render() {
    let { items, farItems } = this.props;
    let { isSearchBoxVisible: searchBoxVisible, areIconsVisible: iconsVisible, areNamesVisible: namesVisible } = this.state;

    let filteredItems = items.map(item => assign({}, item, {
      name: namesVisible ? item.name : '',
      icon: iconsVisible ? item.icon : ''
    }));

    let filteredFarItems = farItems.map(item => assign({}, item, {
      name: namesVisible ? item.name : '',
      icon: iconsVisible ? item.icon : ''
    }));

    return (
      <div>
        <Toggle
          label='Show search box'
          checked={ searchBoxVisible }
          onChanged={ isSearchBoxVisible => this.setState({ isSearchBoxVisible }) }
          onText='Visible'
          offText='Hidden'
        />
        <Toggle
          label='Show names'
          checked={ namesVisible }
          onChanged={ areNamesVisible => this.setState({ areNamesVisible }) }
          onText='Visible'
          offText='Hidden' />
        <Toggle
          label='Show icons'
          checked={ iconsVisible }
          onChanged={ areIconsVisible => this.setState({ areIconsVisible }) }
          onText='Visible'
          offText='Hidden' />
        <CommandBar
          isSearchBoxVisible={ searchBoxVisible }
          searchPlaceholderText='Search...'
          elipisisAriaLabel='More options'
          items={ filteredItems }
          farItems={ filteredFarItems }
        />
      </div>
    );
  }
}

请帮我看看这是什么问题？ 我已经安装了 Fabric React NPM 包。

Answer 1

我认为问题在于您的道具 items 和 farItems 不是数组。这可能是因为它们真的不是数组，或者当组件第一次加载时数据还没有加载，所以 props 是未定义的。

对尚未加载的数据的简单修复是为这些道具提供默认值。在你的渲染方法中尝试let { items = [], farItems = [] } = this.props; 之类的东西。