Question

创建了一个操作来使用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，我只希望在操作开始时调用我的退货。

这是组件的代码

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));

Answer 1

需要将以下内容添加到我的组件中：

function mapDispatchToProps(dispatch) {
    return bindActionCreators({
        riderVan: riderVan,
    }, dispatch)
}

我还必须使用this.props调用动作，如下所示，而不仅仅是函数的名称。

 this.props.riderVan(vanArray, riderInfo, availSeats);

Redux操作返回功能不起作用

1 个答案: