Javascript 注销组件：TypeError:无法读取属性'；道具'；未定义的

当我点击Logout按钮注销时，它应该触发logoutUser（）函数并注销那个人

现在：

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

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

注销

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

之前：

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

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

注销

如果添加点，则会显示另一条错误消息，说明未定义onLogoutClick

两者都是错误的

功能组件没有此。请参见在此类组件中如何使用道具：

正确的答案是

const导航栏=（{logoutUser}）=>{
const onLogoutClick=e=>{
e、 预防默认值（）
logoutUser（）
}
//等等。。。
}

---

欢迎回复：）

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

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

onClick={this.props.logoutUser()}

---

您似乎在混合类/函数组件概念。由于您似乎正在使用功能组件

props

将不存在于

this

，因此这些将作为参数传入，例如

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

功能MyComponent（道具）{
const onLogoutClick=e=>{
e、 预防默认值（）；
props.onLogout（）；
}
...
返回(
...
注销
...
)
}

JavaScripts中的所有函数都有

这个

是的，实际上，我更喜欢使用“导出默认函数ComponentName”，然后简单地使用“函数名（…）”来声明里面的函数，这仍然不起作用，

props

不存在于函数组件中的

this

中。您可以查看最后一个链接，他录制了一段显示所有代码的视频。顺便说一句，他没有使用这种“函数MyComponent（props）”样式。@Frederikesar

const NavigationBar=（）=>{…}

是函数组件的定义。是的，的确是这样@bpdg没问题，但是这个网站的想法是你使用投票/接受答案，帮助你不留下问题。是的，仍然试图找出哪个有效，因为仍然不起作用。在我选一个之前就解决了。