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

您需要将mapStateToProps函数作为第一个参数传递给connect，以使这些值可用于连接到redux存储的组件。不带任何参数的连接除了使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';

Answer 2

您必须将 mapStateToProps 和 mapDispatchToProps 传递给 connect ，以便它可以创建可以访问redux存储的包装器。

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

Answer 3

发现了问题...

import语句似乎在连接中发挥了作用。

错误

    @RunWith(Cucumber.class)
@CucumberOptions(
features = {"src/extentPackage/LoginToABSi.feature"},
glue = {"stepDefinitions"},
plugin = {"com.cucumber.listener.ExtentCucumberFormatter:target/report.html"}
)
public class RunCukesTest {

     public static WebDriver driver;
     public static WebDriverWait wait;
     public static ExtentProperties extentProperties;

@AfterClass
public static void teardown() {

Reporter.loadXMLConfig(new File("Report-Config/extent-config.xml"));
Reporter.setSystemInfo("user", System.getProperty("user.name"));
Reporter.setSystemInfo("os", "Mac OSX");
Reporter.setTestRunnerOutput("Sample test runner output message");

}

正确

import { ShoppingList } from './components/ShoppingList';
import { ItemModal } from './components/ItemModal';

有人知道差异吗？我想知道那里有没有贴吗？

React / Redux导出默认connect（）似乎未连接到提供者

3 个答案: