我正在尝试使用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(),我就可以查看它了,我觉得我不能在这个动作中返回函数。
1条答案
按热度按时间dwthyt8l1#
我知道了,我忘了把我的action加到这个组件的头上了。但是我真的不知道错误会是这样的。这对我来说是一个很好的教训...