Antd: настройка пунктов меню с помощью свойства state

Question

Метод отображения не работает для визуализации элементов подменю.

Состояние в этом классе.

class SideBar extends React.Component {
    constructor(props) {
    super(props);
    this.state = { fruits:["orange","peach","grape"] };

    }

Часть визуализации этого класса.

<Menu>
<SubMenu 
   key="sub1" 
   title={<span><Icon type="mail" />
   <span>User-list</span></span>}>

   {this.state.fruits.map(function(item, i){
     <Menu.Item key={i}>{item}</Menu.Item>
   })}

</SubMenu>
</Menu>

Answer 1

Вы ничего не возвращаете из своей функции внутри вашей карты. Смотрите этот пример: https://codesandbox.io/s/73w271now6?fontsize=14

{this.state.fruits.map(function(item, i) {
  return <Menu.Item key={i}>{item}</Menu.Item>;
})}

Вы также можете создать там функцию стрелки и опустить ключевое слово return, потому что у вас есть только одна строка кода (вы можете прочитать this , если вам нужна дополнительная информация о функциях стрелки), например так:

{
  this.state.fruits.map((item, i) => <Menu.Item key={i}>{item}</Menu.Item>)
}