React中使用.map()渲染组件，数组push元素后页面未更新问题求助

问题核心原因 #

1. 你声明的buttonsArray是组件内的普通变量，不属于React托管的状态，React不会监听普通变量的变更触发组件重渲染：你调用push方法更新数组后，组件的渲染逻辑不会重新执行，所以页面永远显示的是初始空数组对应的渲染结果。
2. 即使后续有其他操作触发了组件重渲染，这个普通数组也会在重渲染时被重新初始化为空数组，之前push的内容会直接丢失。
3. 额外问题：直接把JSX组件实例存在数组里作为key的拼接项，会导致key实际是[object Object]格式的重复值，不符合React的key规范。

修复方案 #

不要直接存储JSX元素到数组，而是存储生成组件需要的配置参数，同时把数组改为React的useState托管状态：

状态声明部分修正 #

import { useState } from 'react';

// 定义按钮配置的TS类型
type ButtonConfig = {
  icon: typeof icons[number];
  iconText: string;
}

// 替换原有的普通数组声明，改为useState状态
const [buttonsArray, setButtonsArray] = useState<ButtonConfig[]>([]);

const submit = () => {
  // 用不可变的方式更新状态，触发组件重渲染
  setButtonsArray(prev => [
    ...prev, 
    { icon: icons[1], iconText: userInput }
  ]);
  handleCloseModal();
};

渲染部分修正 #

<ul style={{ margin: 0, padding: 0 }}>
  {buttonsArray.map((btnConfig, index) => (
    <li key={`super-btn-${index}-${btnConfig.iconText}`}>
      <SuperpowerBtn 
        icons={btnConfig.icon} 
        iconText={btnConfig.iconText} 
      />
    </li>
  ))}
</ul>

原打印出现类JSON格式的说明 #

你打印数组时看到的类JSON对象就是React JSX元素的内部表示格式，属于正常现象，不是类型声明的问题，核心问题还是状态没有被React托管导致没有触发重渲染。

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