无法读取未定义的属性 'dispatch'。反应

Question

以下是我正在使用的代码。我收到类似 Uncaught TypeError: Cannot read property 'dispatch' of undefined 的错误。我也想dispatch一个动作

import { connect } from 'react-redux'
let SearchBar = ({ dispatch }) => {
    let input
    return (
       <div>
           <form>
              <input type="text" placeholder="Search"  />
              <p>
                 <input type="checkbox" />
                 {' '}
                 Free
              </p>                
           </form>
       </div>
   )
}

SearchBar = connect()(SearchBar)
export default SearchBar()

Answer 1

我在您的代码示例中立即注意到几件事：

首先，connect 函数需要在第一个括号中包含一些参数，即使该参数是 null，我也不认为您在导出行中需要括号。尝试用这样的东西替换最后两行：

export default connect(null)(SearchBar);

看看有什么不同。

Answer 2

您从 connect 传递和检索 dispatch 是正确的。由于 connect 没有任何参数，因此 return 只有 dispatch

但是问题在于您导出组件的方式

export default SearchBar();

您不需要 () 在 SearchBar 之后还有一件事。为清楚起见，您可以使用不同的名称，例如

var search = connect()(SearchBar)
export default search;

或者您可以一步完成，例如

export default connect()(SearcBar);

后者是shorthand与前者相同的东西。

Answer 3

我们也可以在连接中添加 mapStateToProps。

const mapStateToProps = state => ({
  uData: state
});

export default connect(mapStateToProps)(App);

我们不需要在 connect() 中给出 null。

我相信它可能对你们中的一些人有所帮助。

无法读取未定义的属性 'dispatch'。反应

Cannot read property 'dispatch' of undefined'. React

reactjs

react-redux

无法读取未定义的 属性 'dispatch'。反应

Cannot read property 'dispatch' of undefined'. React

reactjs

react-redux

无法读取未定义的属性 'dispatch'。反应