React / Redux导出默认的connect（）似乎未连接到Provider

Question

[解决]查看我的答案

我正在通过youtube播放列表https://www.youtube.com/watch?v=TO6akRGXhx8学习MERN Stack 。当我到达28:04时，我陷入了困境，他忘了用“ react-redux”连接他的组件。我遵循了他的解决方法，但是很好，由于某种原因，我的似乎没有联系。没有道具传递给我的ItemModal组件。因此，我花了3个小时进行调试，最后得出结论：只有将js命名为ShippingList时，connect（）才能起作用，这很奇怪。当我将ShippingList重命名为另一个名称并更新引用时，它不再起作用。 ..请参阅下面的一些代码段

我认为我在创建它时不需要在商店中标识一个组件。

想知道你们是否可以复制它，请找到我的仓库 https://github.com/AmeDin/mern

ShoppingList.js

import React, { Component } from 'react'
import { connect } from 'react-redux'

export class ShoppingList extends Component {


  render() {
    console.log(this.props)
    console.log(this.state)
    //const { items } = this.props.item;
    return (
      <div>

      </div>
    )
  }
}



const mapStateToProps = (state) => ({
    item: state.item
})

export default connect()(ShoppingList);

ShoppingListOne.js

import React, { Component } from 'react'
import { connect } from 'react-redux';

export class ShoppingListOne extends Component {


  render() {
    console.log(this.props)
    console.log(this.state)
    //const { items } = this.props.item;
    return (
      <div>

      </div>
    )
  }
}



const mapStateToProps = (state) => ({
    item: state.item
})

export default connect()(ShoppingListOne);

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { createStore, applyMiddleware, compose } from 'redux'
import rootReducer from './reducers/index'
import thunk from 'redux-thunk'
import { Provider } from 'react-redux'
import * as serviceWorker from './serviceWorker';

const middleware = [thunk];

const store = createStore(rootReducer, 
    compose(
        applyMiddleware(thunk)
    )
);
ReactDOM.render(<Provider store={store}><App /></Provider>, 
document.getElementById('root'));

serviceWorker.unregister();

console.log的屏幕截图：https：//i.stack.imgur.com/FPBBs.png

进一步测试ShoppingListOne

const mapStateToProps = (state) => ({
    item: state.item
})

const mapDispatchToProps = (dispatch) => {
  console.log(dispatch)

}

export default connect(mapStateToProps, mapDispatchToProps)(ShoppingListOne);

购物清单

const mapStateToProps = (state) => ({
    item: state.item
})


const mapDispatchToProps = (dispatch) => {
  console.log(dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)(ShoppingList);

ShoppingListOne似乎没有调用任何函数。ShoppingList具有一个称为line26（控制台第三行）的功能。

https://i.stack.imgur.com/WxwRm.png

Answer 1

您需要将mapStateToPropsfunction作为第一个参数传递connect，以使这些值可用于连接到redux store的组件。不带任何参数的连接不做任何事情，除了dispatch提供对连接组件的支持

const mapStateToProps = (state) => ({
    item: state.item
})

export default connect(mapStateToProps)(ShoppingListOne);

和

const mapStateToProps = (state) => ({
    item: state.item
})

export default connect(mapStateToProps)(ShoppingList);

另外，您还需要确保已导入连接的组件，该组件将ShoppingListOne作为默认导出而不是命名导出导出

您导入的样子

import ShoppingListOne from './path/to/ShoppingListOne';