reactjs React Redux,返回函数时,“return”在特定Redux Action函数中不起作用

xvw2m8pv  于 2023-02-12  发布在  React
关注(0)|答案(1)|浏览(119)

我正在尝试使用React-Redux更新一个客户的名称。这是我的组件代码:

import React, { useEffect, useState } from "react";
import { Link, Navigate, useParams } from 'react-router-dom';
import { connect } from 'react-redux';
import { customerDetail, deleteCustomer, updateCustomer } from "../../redux";

const CustomerDetail = ( {customerDetail, userData} ) => {

    let actionType = ''

    const { cid } = useParams()

    useEffect(() => {
        customerDetail(cid)
    }, [])

    const [formData, setFormData] = useState({
        customer_name: ''
    });

    const { customer_name } = formData;

    const onChange = e => setFormData({ ...formData, [e.target.name]: e.target.value });

    const onClick = e => {
        actionType = e.target.name;
    }

    const onSubmit = e=> {
        e.preventDefault();
        console.log('submit clicked')
        actionType === 'update' ? updateCustomer(cid, customer_name) : deleteCustomer();
    };

    return userData ? (
        <div>
            <form onSubmit={e => onSubmit(e)}>
                <table className="table">
                    <thead>
                        <tr>
                            <th scope="col">ID</th>
                            <th scope="col">Customer Name</th>
                            <th scope="col">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>{userData.id}</td>
                            <td>
                                <input 
                                placeholder={userData.customer_name}
                                className='form-control'
                                id="exampleInputCustomerName"
                                name="customer_name"
                                value={customer_name}
                                onChange={e => onChange(e)}
                                >
                                </input>
                            </td>
                            <td>
                                <button 
                                type="submit" 
                                name="update"
                                className="btn btn-primary"
                                onClick={e => onClick(e)}
                                >Update
                                </button>
                                <button 
                                type="submit" 
                                name="delete"
                                className="btn btn-danger"
                                onClick={e => onClick(e)}
                                >Delete
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </form>
        </div>
    ) : (
        <div>
            Please login first
        </div>
    )
};

const mapStateToProps = state => ({
    // is authenticated?
    isAuthenticated: state.auth.isAuthenticated,
    userData: state.customer.customer
})

const mapDispatchToProps = dispatch => {
    return {
        customerDetail: cid => dispatch(customerDetail(cid)),
        updateCustomer: (customer_name, cid) => dispatch(updateCustomer(cid, customer_name)),
        deleteCustomer: () => dispatch(deleteCustomer())
    }
}

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

出现问题的函数是updateCustomer函数
以下是updateCustomer函数的代码片段:

export const updateCustomer = (cid, customer_name) => {
    console.log("Update action called")
    console.log(cid)
    console.log(customer_name)
    return (dispatch) => {
        console.log('dispatch called')
        const config = {
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `JWT ${localStorage.getItem('access')}`,
                'Accept': 'application/json'
            }
        }
        const body = JSON.stringify({ customer_name });
        console.log(body)
        dispatch(updateCustomersRequest)
        axios.put(`${process.env.REACT_APP_API_URL}/api/users/${cid}/`, body, config)
        .then(response => {
            const users = response.data
            console.log(response)
            dispatch(updateCustomersSuccess(users))
        })
        .catch(error => {
            const errorMsg = error.message
            dispatch(updateCustomersFailure(errorMsg))
        })
    }
}

我可以在终端中查看cid、customer_name和“Update action called”,但是我不能在终端中查看“dispatch called”,我的其他action函数工作正常,这让我感到很困惑。
如果我把return函数改为只返回console.log(),我就可以查看它了,我觉得我不能在这个动作中返回函数。

dwthyt8l

dwthyt8l1#

我知道了,我忘了把我的action加到这个组件的头上了。但是我真的不知道错误会是这样的。这对我来说是一个很好的教训...

相关问题