React Hooks中useState更新数组时异常新增元素问题求助

问题代码 #

import React, { useState } from "react";

const friendsArray = [
    {
        name:"Lalit",
        age: 23,
    },
    {
        name:"Neha",
        age: 22,
    },
    {
        name:"Piyush",
        age: 20,
    },
]

function Arrex(){

    const [arr,setArr] = useState(friendsArray)

    const handleclick=()=>{
        setArr((prevArr)=>[
        ...prevArr,
        {
            name:"Shubham",
            age:25,
        }])
    }
    const handleupdate=()=>{
        setArr([
            ...arr,
            arr[0].name="Purohit",
            arr[1].name="Sharma",
        ])
    }

    return(
        <div>
            <h2>Adding a new value to array</h2>
            <ul>
                {arr.map((friend,index)=>(
                    <li key={index}>name: {friend.name}<br/>age: {friend.age}</li>
                ))}
            </ul>
            <button onClick={handleclick}>Add New</button>
            <button onClick={handleupdate} >Update</button>
        </div>
    )
}

export default Arrex;

问题描述 #

我是React.js新手，正在练习useState操作数组的用法，遇到如下问题：点击Update按钮虽能修改数组前两个元素的name值，但数组会额外新增两个空元素，且每次点击都会出现该情况；Add New按钮添加元素功能正常。

问题原因 #

你的handleupdate函数存在两个关键错误：

1. 直接修改原状态数组：arr[0].name="Purohit"这种写法直接修改了原数组中的元素，违反了React状态的不可变性原则，可能导致组件渲染异常。
2. 错误添加数组元素：arr[0].name="Purohit"是一个赋值语句，它的返回值是赋值的内容（字符串"Purohit"）。你在setArr的数组里写了[...arr, arr[0].name="Purohit", arr[1].name="Sharma"]，相当于把原数组展开后，额外添加了两个字符串元素。这两个字符串不是对象，没有name和age属性，所以渲染时显示为“空”（实际是undefined）。

修复方案 #

修改handleupdate函数，遵循React状态不可变原则，创建新数组并修改指定元素：

方法一：复制数组后修改指定项 #

const handleupdate = () => {
    setArr(prevArr => {
        // 复制原数组
        const newArr = [...prevArr];
        // 复制第一个元素并修改name，不改变原元素
        newArr[0] = {...newArr[0], name: "Purohit"};
        // 复制第二个元素并修改name
        newArr[1] = {...newArr[1], name: "Sharma"};
        return newArr;
    });
}

方法二：使用map遍历修改 #

如果需要修改的元素位置不固定，或者有更多条件判断，推荐用map方法：

const handleupdate = () => {
    setArr(prevArr => prevArr.map((friend, index) => {
        if (index === 0) {
            // 返回新对象，修改name
            return {...friend, name: "Purohit"};
        }
        if (index === 1) {
            return {...friend, name: "Sharma"};
        }
        // 其他元素保持不变
        return friend;
    }));
}

说明 #

• 两种方法都没有直接修改原状态数组，而是创建了新的数组/对象，符合React的不可变更新要求，能确保组件正确重渲染。
• 使用prevArr（状态更新函数的参数）来获取最新的状态值，避免因闭包导致的状态过期问题。

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