React-Redux应用中联系人更新功能的实现与常见错误解析

// redux/actions/Actions.js (原始)
export const UpdateContact = (id) => {
    return {
        type: 'UPDATE_CONTACT',
        payload: id // 错误：这里只传递了ID
    }
}

// redux/reducers/AppReducer.js (原始)
case "UPDATE_CONTACT":
    const updatedContact = action.payload; // 错误：期望这里是完整的联系人对象
    const updatedContacts = state.contacts.map((contact) => {
        if (contact.id === updatedContact.id) {
            return updatedContact
        }
        return contact
    })
    return updatedContacts; // 注意：这里直接返回了数组，丢失了其他状态

// redux/actions/Actions.js (修正后)
export const UpdateContact = (contact) => { // 接收完整的联系人对象
    return {
        type: 'UPDATE_CONTACT',
        payload: contact // 将完整的联系人对象作为payload
    }
}

// redux/reducers/AppReducer.js (修正后)
case "UPDATE_CONTACT":
    const updatedContact = action.payload; // 现在这里是完整的联系人对象
    const updatedContacts = state.contacts.map((contact) => {
        if (contact.id === updatedContact.id) {
            return updatedContact; // 找到匹配的ID，返回新的联系人对象
        }
        return contact; // 返回原有的联系人对象
    });
    // Reducer应该返回一个新的状态对象，包含所有原有的状态和更新后的contacts
    return {
        ...state,
        contacts: updatedContacts
    };

// components/UpdateContactPage.js (修正后)
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 contacts = useSelector(state => state.userReducer.contacts);
  const navigate = useNavigate(); // 用于重定向

  // 确保在组件挂载时找到对应的联系人，并处理找不到的情况
  const initialContact = contacts.find((contact) => contact.id === id);

  // 如果找不到联系人，可以重定向或显示错误信息
  useEffect(() => {
    if (!initialContact) {
      navigate('/contacts'); // 例如，重定向到联系人列表页
    }
  }, [initialContact, navigate]);

  // 使用找到的联系人初始化状态，如果找不到则使用空对象或默认值
  const [user, setUser] = useState(initialContact || {
    id: '',
    userName: '',
    surname: '',
    image: ''
  });

  // 确保当initialContact变化时，user状态也随之更新 (例如，从路由参数加载数据)
  useEffect(() => {
    if (initialContact) {
      setUser(initialContact);
    }
  }, [initialContact]);


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

  const dispatch = useDispatch();

  const updateContactForm = (e) => {
    e.preventDefault();
    dispatch(UpdateContact(user)); // 现在dispatch的是完整的user对象
    navigate('/contacts'); // 更新成功后可以重定向回联系人列表页
  };

  if (!initialContact) {
    return <div>Loading contact or contact not found...</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} // 使用value而不是defaultValue，以便受控组件
            />
          </div>
          <div className="mb-3">
            <input
              type="text"
              name='image'
              className="form-control"
              placeholder='img'
              onChange={handleChange}
              value={user.image} // 使用value而不是defaultValue
            />
          </div>
          <div className="mb-3">
            <input
              type="text"
              name='surname'
              className="form-control"
              placeholder='surname'
              onChange={handleChange}
              value={user.surname} // 使用value而不是defaultValue
            />
          </div>
          <button type="submit" className="btn btn-primary">Update</button>
        </form>
      </div>
    </>
  );
};

export default UpdateContactPage;