在 React 中，直接调用 array.pop() 等方法修改 state 数组属于状态突变（mutation），不会触发组件重渲染；必须通过 setState 赋予新数组才能使 UI 正确响应。
在 react 中，直接调用 `array.pop()` 等方法修改 state 数组属于**状态突变（mutation）**，不会触发组件重渲染；必须通过 `setstate` 赋予新数组才能使 ui 正确响应。
你遇到的问题——点击减号按钮（handleRemoveTextBox）后界面未立即更新——根本原因在于：你直接调用了 textboxes.pop() 修改了原始数组，却未调用 setTextboxes() 更新状态。
React 的 useState 依赖不可变数据模式（immutability）：只有当 setState 接收一个全新引用的对象或数组时，React 才会检测到变化并触发重渲染。而 Array.prototype.pop()、.push()、.splice() 等方法会就地修改原数组（返回的是同一引用），导致 React 认为“状态没变”，从而跳过更新。
✅ 正确做法是：先创建新数组副本，再修改副本，最后通过 setTextboxes() 提交新数组。例如：
const handleRemoveTextBox = () => {
if (textboxes.length <blockquote>
<p>? 更推荐使用 <code>slice(0, -1)</code> 或 <code>filter()</code> 等函数式方法，语义清晰且不产生副作用。例如按索引删除某一项（更健壮）：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8476" title="react-pro"><img
src="https://img.php.cn/upload/skill/000/000/081/179206034644870.jpg" alt="react-pro" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill8476" title="react-pro" class="overflowclass">react-pro</a>
<p class="overflowclass">你是一位 React 专家，擅长高级 Hook、性能优化、状态管理和现代 React 模式。适用场景：高级 Hook 模式...</p>
</div>
<a rel="nofollow" href="/xiazai/skill8476" title="react-pro" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<pre class="brush:php;toolbar:false;">const handleRemoveTextBox = (id: string) => {
setTextboxes(prev => prev.filter(box => box.id !== id));
};
并在 JSX 中为每个删除按钮绑定对应 id：
<button onclick="{()"> handleRemoveTextBox(box.id)}
className={`${styles.icon} ${styles.remove}`}
>
<i classname="fa-solid fa-minus"></i>
</button>
⚠️ 注意事项：
- ❌ 避免
textboxes.pop()、textboxes.splice()、textboxes.push()等直接修改原数组的操作； - ✅ 始终使用纯函数式操作生成新数组：
[...arr]、arr.slice()、arr.filter()、arr.map()； - ?
setTextboxes()必须被显式调用——它不是可选步骤，而是触发重渲染的唯一途径； - ? 若需支持删除任意步骤（而非仅末尾），建议为每个
<textarea></textarea>绑定独立id并传入handleRemoveTextBox，提升用户体验与逻辑鲁棒性。
总结：React 状态更新的核心原则是 “永不直接修改 state”。无论增删改，都应基于当前 state 创建新值，再通过 setter 函数提交。这不仅是修复 onClick 不更新的钥匙，更是构建可预测、易调试 React 应用的基石。
