Javascript mapDispatchToProps未将ActionCreator分派到所需组件
我正在尝试使用mapDispatchToProps来获取动作,所有动作创建者都在某个组件中,但似乎某个组件的道具中的任何动作都是未定义的,我不知道为什么。。。。我已经检查了我的ActionCreator和其他文件,但它们似乎是正确的,我对此非常确定 我已经在这里尝试了我所能做的一切,但是可能有一些小的东西我可能遗漏了,我很确定这是在我提供的代码中Javascript mapDispatchToProps未将ActionCreator分派到所需组件,javascript,reactjs,react-native,react-redux,Javascript,Reactjs,React Native,React Redux,我正在尝试使用mapDispatchToProps来获取动作,所有动作创建者都在某个组件中,但似乎某个组件的道具中的任何动作都是未定义的,我不知道为什么。。。。我已经检查了我的ActionCreator和其他文件,但它们似乎是正确的,我对此非常确定 我已经在这里尝试了我所能做的一切,但是可能有一些小的东西我可能遗漏了,我很确定这是在我提供的代码中 import React, { Component } from 'react'; import Main from './components/M
import React, { Component } from 'react';
import Main from './components/MainComponent';
import { View, Platform } from 'react-native';
import { ConfigureStore } from './redux/configureStore';
import { connect, Provider } from 'react-redux';
import { fetchDishes, fetchPromos, fetchComments, fetchLeaders } from './redux/ActionCreators';
const mapDispatchToProps = (dispatch) => ({
fetchDishes: () => dispatch(fetchDishes()),
fetchComments: () => dispatch(fetchComments()),
fetchPromos: () => dispatch(fetchPromos()),
fetchLeaders: () => dispatch(fetchLeaders()),
});
const store = ConfigureStore();
function App() {
return (
<Provider store = {store}>
<Something />
</Provider>
);
}
class Something extends Component {
componentDidMount() {
this.props.fetchDishes();
this.props.fetchComments();
this.props.fetchPromos();
this.props.fetchLeaders();
}
render() {
return (
<View style={{flex: 1, paddingTop: Platform.OS === 'ios' ? 0 : Expo.Constants.statusBarHeight }}>
</View>
);
}
}
const mapStateToProps = state => {
return {
}
}
connect(mapStateToProps, mapDispatchToProps)(Something);
export default App;
只有一部分actionCreators被上传,我认为这可能是必要的
必须传递所有提取函数,并且在某个组件中不应出现未定义的内容。您正在定义一个连接的组件,但没有使用它 以下是进出口贸易:
// Something.js
// A couple of imports...
class Something extends Component {
// ...
}
const mapDispatchToProps = (dispatch) => ({
fetchDishes: () => dispatch(fetchDishes()),
fetchComments: () => dispatch(fetchComments()),
fetchPromos: () => dispatch(fetchPromos()),
fetchLeaders: () => dispatch(fetchLeaders()),
});
export default connect(null, mapDispatchToProps)
#App.js
//几个进口货。。。
从“./某物”导入某物
函数App(){
返回(
);
}
注意:由于您没有来自
mapStateToProps
的ay道具,您只需将null
作为第一个参数。您正在定义连接的组件,但未使用它
以下是进出口贸易:
// Something.js
// A couple of imports...
class Something extends Component {
// ...
}
const mapDispatchToProps = (dispatch) => ({
fetchDishes: () => dispatch(fetchDishes()),
fetchComments: () => dispatch(fetchComments()),
fetchPromos: () => dispatch(fetchPromos()),
fetchLeaders: () => dispatch(fetchLeaders()),
});
export default connect(null, mapDispatchToProps)
#App.js
//几个进口货。。。
从“./某物”导入某物
函数App(){
返回(
);
}
注意:由于您没有来自
mapStateToProps
的ay道具,您可以简单地将null
作为第一个参数。您的应用程序
组件直接使用您的某物
组件,而不是其连接版本
...
const ConnectedSomething = connect(mapStateToProps, mapDispatchToProps(Something);
function App() {
return (
<Provider store={store}>
<ConnectedSomething />
</Provider>
);
}
...
。。。
const ConnectedSomething=connect(mapStateToProps、mapDispatchToProps(Something);
函数App(){
返回(
);
}
...
您的应用程序
组件正在直接使用您的某物
组件,而不是其连接版本
...
const ConnectedSomething = connect(mapStateToProps, mapDispatchToProps(Something);
function App() {
return (
<Provider store={store}>
<ConnectedSomething />
</Provider>
);
}
...
。。。
const ConnectedSomething=connect(mapStateToProps、mapDispatchToProps(Something);
函数App(){
返回(
);
}
...
现在出现另一个错误,它说……您必须将一个组件传递给connect返回的函数,而不是接收未定义的组件。似乎connect函数返回未定义的对象……我不知道为什么???这是一个未定义的对象。您必须不正确地导入它导入错误的内容???connect或actionCreators…你能给我一些建议吗???谢谢你的帮助…@MatthieuI编辑了答案,还指定了导入和导出,你应该很好。现在它显示了另一个错误…你必须将一个组件传递给connect返回的函数,而不是接收到未定义的。似乎connect函数返回未定义的对象…我不知道我不知道为什么???这是一个未定义的东西。你必须正确导入它导入错误的东西???connect或actionCreators…你能给我一些建议吗???谢谢帮助…@MatthieuI编辑了答案,还指定了导入和导出,你应该是好的,现在所有的一切都必须添加actionCreators到代码中易于分析…我猜代码中添加了ActionCreator现在所有内容都必须易于分析…我猜