React组件无法删除指定数据及一键清空数据问题排查求助

你的代码核心问题出在渲染逻辑上：页面展示的是初始定义的静态数组myBioData，而不是受控的状态变量myArray。不管你调用removeElement或clearValue怎么修改状态，页面都不会同步更新——因为它根本没绑定状态数据。偶尔能清空是偶发的异常情况，不是正常逻辑。

修复后的代码 #

import React, { useState } from 'react'

const UseStateArray = () => {
    const myBioData = [
        {
            id: 1, name: "Chintan", age: 12
        },
        {
            id: 2, name: "patel", age: 22
        }
    ]

    const [myArray, setmyArray] = useState(myBioData);

    const clearValue = () => {
        setmyArray([]);
    }

    const removeElement = (id) => {
        // 用函数式更新获取最新状态，避免闭包导致的旧状态问题
        setmyArray(prevArray => prevArray.filter(curElm => curElm.id !== id));
    }

    return (
        <>
            {/* 关键修改：把myBioData改成myArray，让页面绑定状态数据 */}
            {
                myArray.map((curElm) => {
                    return (
                        <h1 key={curElm.id}>Name: {curElm.name} & Age: {curElm.age}
                            <button className='btn btn-danger' onClick={() => removeElement(curElm.id)}>Remove</button>
                        </h1>
                    )
                })
            }
            <button className='btn btn-danger' onClick={clearValue}>Clear</button>
        </>
    )
}

export default UseStateArray

关键修改点 #

• 渲染数组时从myBioData.map改为myArray.map，让页面内容和状态变量绑定，状态更新后页面自动重新渲染。
• 删除元素时改用函数式更新setmyArray(prevArray => ...)，确保每次都基于最新的状态进行修改，避免闭包陷阱。

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