React数组编辑功能报错：非目标元素变为undefined问题咨询

问题根源 #

你的问题完全是编码方式导致的。在编辑逻辑的map回调里，只有当索引匹配editId时才返回了新值，其余情况没有返回任何内容，而map函数会把没有返回值的项默认设为undefined，这就导致数组里除了目标元素外全变成了undefined。

修正后的代码 #

const Account = () => {
    const [currentItem, setCurrentItem] = useState('')
    const [itemList, setItemList] = useState([])
    const [title, setTitle] = useState('') // 初始化设为空字符串，避免初始值为undefined
    const [status, setStatus] = useState(false)
    const [editId, setEditId] = useState(null) // 用null区分未编辑状态

    console.log(itemList)
    
    const addItemToList = () => {
        if (status) { 
            // 用函数式更新，避免依赖旧state快照导致的问题
            setItemList(prevList => prevList.map((item, i) => {
                // 匹配索引时返回新值，否则返回原元素
                return i === editId ? title : item
            }))
            setTitle('')
            setStatus(false)   
        } else {
            setItemList(prevList => [...prevList, title])
            setTitle('')
        }
    }
   
    const editHandler = (index) => {
        // 直接通过索引取元素，比find更高效
        setTitle(itemList[index]) 
        setStatus(true) 
        setEditId(index)
    }

    // 补充缺失的删除函数
    const deleteHandler = (index) => {
        setItemList(prevList => prevList.filter((_, i) => i !== index))
    }

    return (
        <div>
            <h1>Account</h1>            
            <input 
                value={title} 
                onChange={(e) => setTitle(e.target.value)} 
                type="text" 
                placeholder="Enter"
            />
            <button onClick={addItemToList}>{status ? 'Edit' : 'Add'}</button>
            <ul>
                {itemList.map((data, index) => (
                    <React.Fragment key={index}>
                        <li>{data}</li>
                        <button onClick={() => deleteHandler(index)}>Delete</button>
                        <button onClick={() => editHandler(index)}>Edit</button>
                    </React.Fragment>                        
                ))}                    
            </ul>  
        </div>    
    )
}

关键优化点 #

• 修复map逻辑：确保map的每一项都有返回值，匹配索引时返回新标题，否则返回原元素。
• 函数式更新state：使用setItemList(prevList => ...)代替直接依赖itemList，避免React异步更新导致的旧state问题。
• 初始化状态优化：给title设初始空字符串，editId设null，让状态更清晰。
• 简化editHandler：直接通过索引获取要编辑的元素，比find方法更高效。
• 补充deleteHandler：补上原代码缺失的删除函数，保证功能完整。

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