TypeError：无法读取未定义的属性“值”-REACTJS答案

【问题标题】：TypeError: Cannot read property 'value' of undefined - REACTJSTypeError：无法读取未定义的属性“值”-REACTJS
【发布时间】：2019-10-23 06:25:09
【问题描述】：

我创建了一个状态，我将传递“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>
  );
}

【问题讨论】：

你的 console.log 日志是什么？
Menu.Item 是什么？
在到达 console.log 之前出现错误“TypeError: Cannot read property 'value' of undefined”
event.target.value 用于从输入更改中获取值，在您的情况下，您应该将要处理的项目中的数据传递给您的 handleClick 函数。
@cmll：为了进一步了解，请告诉我您使用的库，Menu.Item 很混乱

标签： javascript reactjs antd

【解决方案1】：

由于您使用的是AntD Menu.Item 组件。您必须知道它不会将事件对象原样传回onClick 事件的回调函数。相反，它传递一个带有以下键的对象：item, key, keyPath, domEvent

由于您想将项目设置为状态，您可以使用对象中的key

handleItem = ({key}) => {

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

}

【讨论】：

有效！谢谢您的回答。我使用 AntD 不到一周，所以我有点不知道它是如何工作的。欣赏你的男人！
onClick 应该添加到 Menu 组件中，而不是添加到每个 Menu.Item 组件中。
每当您遇到此类问题时，我认为最好参考文档并查看是否可以找出错误。它将帮助您了解更多有关功能的信息，并为您提供有关库的详细知识
@Titus，是的，这可能是一个更好的主意。但是在菜单上，您需要 onSelect 而不是 onClick
有一个onClick 代表Menu，文档页面上的所有示例都使用它。

【解决方案2】：

我想，你很困惑如何将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 是异步运行的。

【讨论】：