解决React-Redux更新操作中的Payload不匹配问题

export const UpdateContact = (id) => { // 接收的是id
    return {
        type: 'UPDATE_CONTACT',
        payload: id // payload被设置为id
    }
}

case "UPDATE_CONTACT":
    const updatedContact = action.payload; // 这里期望action.payload是一个完整的联系人对象
    const updatedContacts = state.contacts.map((contact) => {
        if (contact.id === updatedContact.id) { // 尝试访问updatedContact.id
            return updatedContact
        }
        return contact
    })
    return updatedContacts // 这是一个bug，应该返回完整的state对象

export const UpdateContact = (contact) => { // 接收完整的联系人对象
    return {
        type: 'UPDATE_CONTACT',
        payload: contact // payload现在是完整的联系人对象
    }
}

case "UPDATE_CONTACT":
    const updatedContact = action.payload; // 现在action.payload确实是完整的联系人对象
    const updatedContacts = state.contacts.map((contact) => {
        if (contact.id === updatedContact.id) {
            return updatedContact; // 用新的联系人对象替换旧的
        }
        return contact;
    });
    return { // 修正：返回一个新的state对象，包含更新后的contacts数组
        ...state,
        contacts: updatedContacts
    };

import React, { useState, useEffect } from 'react'; // 引入useEffect
import { useSelector, useDispatch } from 'react-redux';
import { useParams, useNavigate } from 'react-router-dom'; // 引入useNavigate用于页面跳转
import { UpdateContact } from '../redux/actions/Actions';

const UpdateContactPage = () => {
  const { id } = useParams();
  const navigate = useNavigate(); // 初始化navigate
  const contacts = useSelector(state => state.userReducer.contacts);

  // 确保ID类型匹配，useParams返回的是字符串
  const currentContact = contacts.find((contact) => String(contact.id) === id);

  // 初始化user state，确保在currentContact不存在时有默认值或处理
  const [user, setUser] = useState(currentContact || {
    id: '',
    userName: '',
    surname: '',
    image: ''
  });

  // 如果currentContact变化（例如，数据加载后），更新user state
  useEffect(() => {
    if (currentContact) {
      setUser(currentContact);
    }
  }, [currentContact]);


  const handleChange = (e) => {
    setUser({ ...user, [e.target.name]: e.target.value });
  };

  const dispatch = useDispatch();

  const updateContactForm = (e) => {
    e.preventDefault();
    dispatch(UpdateContact(user)); // 现在传递的是完整的user对象
    // 更新成功后，可以导航回联系人列表页或显示成功消息
    navigate('/'); // 例如，导航到首页或联系人列表页
  };

  // 如果没有找到联系人，可以显示加载或错误信息
  if (!currentContact) {
    return <div className="container mt-5">联系人未找到或正在加载...</div>;
  }

  return (
    <>
      <div className="container mt-5">
        <form onSubmit={updateContactForm}>
          <div className="mb-3">
            <input type="text" name='userName' className="form-control" placeholder='username' onChange={handleChange} value={user.userName || ''} />
          </div>
          <div className="mb-3">
            <input type="text" name='image' className="form-control" placeholder='img' onChange={handleChange} value={user.image || ''} />
          </div>
          <div className="mb-3">
            <input type="text" name='surname' className="form-control" placeholder='surname' onChange={handleChange} value={user.surname || ''} />
          </div>
          <button type="submit" className="btn btn-primary">Update</button>
        </form>
      </div>
    </>
  );
};

export default UpdateContactPage;

const initialState = {
    contacts: localStorage.getItem('Contacts') ? JSON.parse(localStorage.getItem('Contacts')) : []
}

export const AppReducer = (state = initialState, action) => {
    switch (action.type) {
        case "ADD_CONTACT":
            return {
                ...state,
                contacts: [...state.contacts, action.payload]
            }
        case "UPDATE_CONTACT":
            const updatedContact = action.payload;
            const updatedContacts = state.contacts.map((contact) => {
                // 确保ID类型匹配，以便正确找到要更新的联系人
                if (String(contact.id) === String(updatedContact.id)) {
                    return updatedContact; // 返回新的联系人对象
                }
                return contact;
            });
            return { // 必须返回一个新的state对象
                ...state,
                contacts: updatedContacts
            };
        case "REMOVE_CONTACT":
            return {
                ...state,
                contacts: state.contacts.filter((item) => String(item.id) !== String(action.payload))
            }
        case "REMOVE_ALL_CONTACTS":
            return {
                ...state,
                contacts: []
            }
        default:
            return state;
    }
}

export const AddContact = (user) => {
    return {
        type: 'ADD_CONTACT',
        payload: user
    }
}

export const DeleteContact = (id) => {
    return {
        type: 'REMOVE_CONTACT',
        payload: id
    }
}

export const UpdateContact = (contact) => { // 修正：接收完整的联系人对象
    return {
        type: 'UPDATE_CONTACT',
        payload: contact // 修正：payload是完整的联系人对象
    }
}

export const RemoveAll = () => {
    return {
        type: 'REMOVE_ALL_CONTACTS',
    }
}