TypeError: Невозможно прочитать свойство 'value' из undefined - REACTJS

Question

Я создал состояние, в котором я собираюсь передать значение "ItemId"

constructor(){
    this.state = {
        item: ''
    }
}

, здесь я объявляю "ItemId"

renderItems = () => {
return ['item1', 'item2', 'item3'].map(ItemId => (
    <Menu.Item
        key={ItemId}
        value={ItemId}
        onClick={this.handleItem}
    >
        <Link>
            {ItemId}
        </Link>
    </Menu.Item>
  ));
}

, это гдеЯ получаю сообщение об ошибке

handleItem = e => {
  this.setState({
      item: e.target.value,
  })
  console.log('item: ', e.target.value)
}

render() {
  return(
     <Menu>
        {this.renderItems()}
     </Menu>
  );
}

Answer 1

Я думаю, вы совершенно не понимаете, как передать itemId в handleItem, тогда вы думаете, что это значение должно быть взято из e.target.value.

Но для вашего случая вам просто нужночтобы передать его дескриптору, как я, и он работает как ожидалось

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      item: ""
    };
  }

  handleItem = item => {
    this.setState({ item }, () => {
      console.log("item > ", this.state.item);
    });
  };

  renderItems = () => {
    return ["item1", "item2", "item3"].map(item => (
      <Menu.Item key={item} value={item} onClick={() => this.handleItem(item)}>
        <a>{item}</a>
      </Menu.Item>
    ));
  };

  render() {
    return <Menu>{this.renderItems()}</Menu>;
  }
}

export default App;

Примечание: чтобы console.log проверил состояние, мне нужно написать его внутри функции обратного вызова setState, потому чтоsetState работает асинхронно.

Answer 2

Поскольку вы используете компонент AntD Menu.Item. Вы должны знать, что он не передает объект события, как это делается в функции обратного вызова для события onClick. Вместо этого он передает объект со следующими ключами: item, key, keyPath, domEvent

И так как вы хотите установить элемент в состояние, вы можете просто использовать key от объекта

handleItem = ({key}) => {

    this.setState({
        item: key,
    })
    console.log('item: ', key)

}