React useState数组无法在页面渲染显示问题求助

核心问题是你直接修改了React状态数组的原引用，React依赖状态的引用变化触发组件重新渲染，而push、pop、length=0这些操作都是在原数组上修改，没有创建新数组。即便调用了handler(inicial)，React发现数组引用没变化，就不会触发重渲染，导致页面上的数组内容不更新。

修正后的代码 #

import './counter.css';
import { useState } from 'react';

export default function HandleArray() {
  const [inicial, handler] = useState([]);

  function addElement() {
    // 复制原数组并添加新元素，生成全新数组引用
    const newArray = [...inicial, 'ok'];
    handler(newArray);
    console.log(newArray);
  }
  function removeElement() {
    // 空数组时直接返回，避免无效操作
    if (inicial.length === 0) return;
    // 截取原数组前n-1个元素，返回新数组
    const newArray = inicial.slice(0, -1);
    handler(newArray);
    console.log(newArray);
  }
  function reset() {
    // 直接传入新的空数组
    handler([]);
    console.log([]);
  }

  return (
    <div className='card text-bg-light border-success mb-3'>
      <div className='card-header'>Welcome</div>
      <div className='card-body'>
        <h5 className='card-title'>Manipulate the array</h5>
        <button type='button' className='btn btn-dark ' onClick={addElement}>
          Insert Element
        </button>
        <button
          type='button'
          className='btn btn-danger'
          onClick={removeElement}
        >
          Remove Element
        </button>
        <button type='button' className='btn btn-warning' onClick={reset}>
          Reset array
        </button>
        
        {/* 用join把数组元素转为直观的字符串显示 */}
        <p className='card-text'>{inicial.join(', ')}</p>
      </div>
    </div>
  );
}

关键修改说明 #

• 添加元素：用扩展运算符[...inicial, 'ok']复制原数组并追加新元素，生成全新的数组引用，让React能检测到状态变化。
• 删除元素：通过slice(0, -1)返回原数组去掉最后一个元素的新数组，同时增加空数组判断避免报错。
• 清空数组：直接传入[]，这是一个全新的空数组引用，触发组件重渲染。
• 额外优化：段落中用inicial.join(', ')将数组元素转为逗号分隔的字符串，比默认的数组toString显示更直观。

内容的提问来源于stack exchange，提问作者André Silveira