Question

当我单击注销按钮注销时，它应该触发函数logoutUser（）并注销该人。

现在：

const onLogoutClick = e => { 
  e.preventDefault();
  this.props.logoutUser();
}

<Dropdown.Item onClick={onLogoutClick}>Log Out</Dropdown.Item>

这没有点这个。现在，错误消息说它无法读取未定义的属性“ props”。

https://gyazo.com/0eb7d40e7502d6d7b625add8371264eb

之前：

onLogoutClick = e => { 'onLogoutClick' is not definded
  e.preventDefault();
  this.props.logoutUser();
}

<Dropdown.Item onClick={this.onLogoutClick}>Log Out</Dropdown.Item>

如果添加点，则会弹出另一条错误消息，提示未定义onLogoutClick。

https://gyazo.com/31c79e167b0b1ed276ed000e3d87f8f7

Answer 1

都错了。

功能组件没有&。在这里查看如何在此类组件中使用道具：https://reactjs.org/docs/components-and-props.html#function-and-class-components

正确将是

this

欢迎作出反应：）

Answer 2

就像我在视频中看到的那样，您正在组件之外创建onLogoutClick函数，请尝试将其移入其中。

或者简单地使用标记内的函数，如下所示：

onClick={this.props.logoutUser()}

Answer 3

您似乎在混用类/函数组件的概念。由于您似乎正在使用功能组件props在this上将不存在，因此它们将作为参数传递，例如

function MyComponent(props) {
  const onLogoutClick = e => {
    e.preventDefault();
    props.onLogout();
  }
  ...
  return (
    ...
    <Dropdown.Item onClick={onLogoutClick}>Log Out</Dropdown.Item>
    ...
  )
}

注销组件：TypeError：无法读取未定义的属性“ props”

3 个答案: