redux - Redux Action Return 功能不起作用
问题描述
创建了一个 Action 来处理使用 Axios 发布我的数据。使用按钮调用操作函数,它可以很好地调用操作。第一个控制台行将导出我的数组的 P_Key 但是返回中的控制台不起作用,我不知道为什么。我使用控制台输出来测试我的数据在应用程序中的位置和内容。我以前用其他动作做过这个,所以我知道我可以做到。
破碎的行动
import { RIDER_VAN } from './types';
import axios from 'axios';
export default function riderVan(vanArray, riderInfo, availSeats) {
const P_Key = vanArray.P_Key;
//This console.log works
console.log(P_Key);
return (dispatch) => {
//This console.log DOES not work
console.log(riderInfo);
}
}
function updateVanAsync(vans) {
return {
type: RIDER_VAN,
payload: vans
}
}
工作行动
import { ADD_VANS } from './types';
import axios from 'axios';
export default function addVan(vans) {
const nameVan = vans.nameVan;
const totalSeats = vans.totalSeats;
return (dispatch) => {
axios.post('URL', { nameVan, totalSeats })
.then((response) => {
//callback();
const vans = response.data;
dispatch(addVansAsync(vans))
})
}
}
function addVansAsync(vans) {
return {
type: ADD_VANS,
payload: vans
};
}
调用动作的函数
addRiderToVan() {
const riderInfo = this.props.riderInfo;
const vanArray = this.state.vansChecked;
const availSeats = (vanArray.availSeats - riderInfo.numParty);
riderVan(vanArray, riderInfo, availSeats);
}
我现在不担心将信息发送给 Dispatch,我只希望在行动开始时调用我的 return。
这是组件的代码
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import FormControl from '@material-ui/core/FormControl';
import FormGroup from '@material-ui/core/FormGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
import { connect } from 'react-redux';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogTitle from '@material-ui/core/DialogTitle';
import { Button } from '@material-ui/core';
import riderVan from '../store/actions/riderVan';
import { bindActionCreators } from 'redux';
const styles = theme => ({
root: {
display: 'flex',
},
formControl: {
margin: theme.spacing.unit * 3,
},
});
class AddToVan extends React.Component {
constructor(props) {
super(props);
this.state = {
vansChecked: []
}
this.handleChange = this.handleChange.bind(this);
this.addRiderToVan = this.addRiderToVan.bind(this);
}
handleChange = name => event => {
this.setState({ [name]: event.target.checked, vansChecked: name });
};
addRiderToVan() {
const riderInfo = this.props.riderInfo;
const vanArray = this.state.vansChecked;
const availSeats = (vanArray.availSeats - riderInfo.numParty);
this.props.riderVan(vanArray, riderInfo, availSeats);
}
render() {
const { classes, vansList } = this.props;
const { vanIsChecked, vanInfo } = this.state;
return (
<Dialog
aria-labelledby="form-dialog-title"
open={this.props.open}
onClose={this.props.close}
aria-labelledby="form-dialog-title"
>
<DialogTitle id="form-dialog-title">Add to Van</DialogTitle>
<DialogContent>
<FormControl component="fieldset" className={classes.formControl}>
<FormGroup>
{vansList.map(van => {
return (
<FormControlLabel
key={van.P_Key}
checked={vanIsChecked}
control={
<Checkbox checked={vanIsChecked}
onChange={this.handleChange(van)}
/>
}
label={van.nameVan}
id="nameVan"
value={van.nameVan}
name="nameVan"
/>
)
})}
</FormGroup>
</FormControl>
</DialogContent>
<DialogActions>
<Button onClick={this.props.close} color="primary">
Cancel
</Button>
<Button onClick={this.addRiderToVan} color="primary">
Save
</Button>
</DialogActions>
</Dialog>
);
}
}
AddToVan.propTypes = {
classes: PropTypes.object.isRequired,
};
function mapStateToProps(state) {
return {
vansList: state.vansList,
}
}
function mapDispatchToProps(dispatch) {
return bindActionCreators({
riderVan: riderVan,
})
}
export default withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(AddToVan));
解决方案
需要将以下内容添加到我的组件中:
function mapDispatchToProps(dispatch) {
return bindActionCreators({
riderVan: riderVan,
}, dispatch)
}
我还必须使用 this.props 来调用我的操作,如下所示,而不仅仅是函数的名称。
this.props.riderVan(vanArray, riderInfo, availSeats);
推荐阅读
- python-3.x - 2 个问题:Python Pickle .dat 附加到列表和 tkinter 检查按钮问题
- android - 我们如何获取传递给 WorkManager WorkRequest 的数据?
- ios - 如何将存储属性添加到 Swift 结构扩展
- android - 在 Android 11 上从“/apex/com.android.runtime/lib64/bionic/libc.so”中止崩溃
- nullpointerexception - 杰克逊解析json中缺少字段时出错java.lang.NullPointerException
- python - python pandas groupby eventType和eventId并获取每个eventType之间的日期差异
- azure - 保护访问以触发 Azure 逻辑应用(HTTP 请求触发器)
- c# - 字符串到字节数组到文件以用于 POST 请求
- google-cloud-sql - 如何从 Cloud Build 连接到 Cloud SQL 以运行 knex 数据库迁移?
- graphql - GraphQL 多值 eq 过滤器