React-Redux联系人应用更新功能报错，如何修复？

以下是你的代码中存在的核心问题及对应的修复方案：

1. Reducer更新分支破坏State结构 #

当前UPDATE_CONTACT分支直接返回了更新后的联系人数组，覆盖了整个State对象（原State是包含contacts属性的对象），导致后续无法正确读取state.userReducer.contacts。

修复代码（修改AppReducer）：

case "UPDATE_CONTACT":
    const updatedContact = action.payload;
    const updatedContacts = state.contacts.map((contact) => {
        if (contact.id === updatedContact.id) {
            return updatedContact
        }
        return contact
    })
    // 返回完整的State对象，仅更新contacts属性
    return {
        ...state,
        contacts: updatedContacts
    }

2. UpdateContact Action参数错误 #

当前Action创建函数接收的是id，但实际需要传递完整的用户对象作为payload，导致Reducer无法获取正确的更新数据。

修复代码（修改Actions文件）：

export const UpdateContact = (user) => {
    return {
        type: 'UPDATE_CONTACT',
        payload: user
    }
}

3. 组件状态初始化与表单绑定问题 #

• 直接用updatedBlog初始化状态可能触发undefined报错（路由参数加载时updatedBlog可能为空）
• 表单输入框使用defaultValue未与user状态联动，逻辑不严谨

修复代码（修改UpdateContactPage组件）：

import React, { useState, useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { useParams, useNavigate } from 'react-router-dom'
import { UpdateContact } from '../redux/actions/Actions'

const UpdateContactPage = () => {
  const { id } = useParams()
  const navigate = useNavigate()
  const contacts = useSelector(state => state.userReducer.contacts)
  const updatedBlog = contacts.find((blog) => blog.id === id)
  const [user, setUser] = useState({
    id: '',
    userName: '',
    surname: '',
    image: ''
  })

  // 当找到目标联系人时初始化表单状态
  useEffect(() => {
    if (updatedBlog) {
      setUser(updatedBlog)
    }
  }, [updatedBlog])

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

  const dispatch = useDispatch();

  const updateContactForm = (e) => {
    e.preventDefault()
    dispatch(UpdateContact(user))
    // 更新完成后可跳回联系人列表页
    navigate('/contacts')
  }

  return (
    <>
      <div className="container mt-5">
        {updatedBlog ? (
          <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>
        ) : (
          <p>联系人不存在</p>
        )}
      </div>
    </>
  )
}

export default UpdateContactPage

可选：本地存储同步优化 #

当前仅在初始化时读取localStorage，更新/删除操作后未同步，刷新页面会丢失修改。可在Reducer的每个修改分支添加同步逻辑：

// 示例：UPDATE_CONTACT分支添加
localStorage.setItem('Contacts', JSON.stringify(updatedContacts))

// ADD_CONTACT分支添加
localStorage.setItem('Contacts', JSON.stringify([...state.contacts, action.payload]))

内容的提问来源于stack exchange，提问作者Pasha Mammadov