Redux动作道具意外行为

Question

I'm trying to post some data through a redux action and there is a problem I can't find.

As you can see on the picture , I use console.log to first display what I am passing to the action. There isn't any problem and every field is correctly filled.

Then I use console.log to display the props received by the action. As you can see, the fields are messed up, they all are in one variable.

Here is the simplified code :

Component

const Profile = ({ updateProfile, history }) => {

const [formData, setFormData] = useState({
  firstname: '',
  lastname: '',
  image: '',
});

const { firstname, lastname, image } = formData;


//fields correctly filled

const onSubmit = async e => {
    e.preventDefault();
    console.log('firstname :', firstname);
    console.log('lastname : ', lastname);
    console.log('img : ', image);
    updateProfile({ firstname, lastname, image, history });
  };

[jsx form etc]

export default connect(
  mapStateToProps,
  { updateProfile }
)(Profile);

Action :

// fields are regrouped in firstname variable

export const updateProfile = (firstname, lastname, image, history) => async dispatch => {
  try {
    console.log('action firstname :', firstname);
    console.log('action lastname :', lastname);
    console.log('action img :', image);

    const body = JSON.stringify({ firstname, lastname, image });

    console.log('action body :', body);
    const res = await axios.put('/api/profile/me', body);
};

I can't find where the problem occurs, since the data that I pass to the action is correct, but the received one is not. I'm sure this is a stupid error, but I can't find it. Any help?

Answer 1

You are expecting spreaded arguments:

export const updateProfile = (firstname, lastname, image, history) =>{}

And passing as a single object:

updateProfile({ firstname, lastname, image, history })

Just change the function signature (actually destructure the args) to expect an object or spread the arguments in the function call:

export const updateProfile = ({firstname, lastname, image, history}) =>{}
updateProfile(...formData)