本文介绍如何使用 React 的 useState Hook 管理列表状态，通过点击按钮将两个输入框的值组合后动态渲染为 元素，并插入到 中，涵盖状态设计、事件处理、列表映射与关键注意事项。
本文介绍如何使用 react 的 usestate hook 管理列表状态，通过点击按钮将两个输入框的值组合后动态渲染为 `
- ` 中，涵盖状态设计、事件处理、列表映射与关键注意事项。
在 React 中，不能直接“创建 DOM 元素”并插入页面（如原生 JS 的 document.createElement），而应通过状态驱动 UI 渲染：将待显示的数据存入状态数组，再用 .map() 动态生成 JSX 列表项。这是函数式组件实现动态列表的核心范式。
✅ 正确实现步骤
- 声明列表状态：使用 useState([]) 存储所有待渲染的
- 文本内容（推荐字符串数组，语义清晰）；
- 收集输入值：为两个 分别绑定 onChange，更新对应状态（注意变量名修正：firtValue → firstValue 更规范，但此处沿用原代码保持兼容）；
- 点击时更新状态：在 onClick 回调中，将当前两个输入值拼接（如 "ItemName $50"），并追加到列表状态中；
- 渲染列表：在 JSX 中对状态数组执行 .map()，为每个元素生成带唯一 key 的
- 。
以下是精简优化后的核心逻辑（已修复原代码中的拼写错误与逻辑缺陷）：
import { useState } from 'react';
function App() {
const [income, setIncome] = useState(0);
const expense = 10;
const balance = income - expense;
const [firstValue, setFirstValue] = useState(''); // 修正变量名（可选）
const [secValue, setSecValue] = useState('');
// ✅ 新增：存储所有待显示的列表项文本
const [items, setItems] = useState([]);
const handleFirstChange = (e) => setFirstValue(e.target.value);
const handleSecChange = (e) => setSecValue(e.target.value);
const handleChange = (e) => setIncome(e.target.value);
const maxLengthCheck = (e) => {
if (e.target.value.length > e.target.maxLength) {
e.target.value = e.target.value.slice(0, e.target.maxLength);
}
};
// ✅ 点击时将组合值追加到 items 数组
const handleClick = () => {
if (firstValue.trim() && secValue.trim()) {
setItems(prev => [...prev, `${firstValue} $${secValue}`]);
// 可选：清空输入框
setFirstValue('');
setSecValue('');
}
};
// ✅ 动态渲染列表：必须提供 key！
const listItemElements = items.map((item, index) => (
<li key={index}>{item}</li>
));
return (
<div>
{/* ... 其他 JSX 保持不变 ... */}
<div className="add-item">
Item
<input
type="text"
className="adding-input"
placeholder="Add Item"
onChange={handleFirstChange}
/>
</div>
<div className="add-item">
Amount
<input
type="number"
className="adding-input"
placeholder="Add Amount"
onChange={handleSecChange}
/>
</div>
<div className="add-button">
<button type="button" className="expense-button" onClick={handleClick}>
Add Expense
</button>
</div>
<div>
<ul>{listItemElements}</ul>
</div>
</div>
);
}
export default App;⚠️ 关键注意事项
- key 属性不可省略：.map() 生成列表时，React 要求每个子元素有稳定唯一的 key。若数据含 ID，优先用 item.id；否则可用 index（仅适用于简单、无顺序变更的场景）；
- 避免直接调用函数渲染：原代码中 {listOfLi()} 是错误的——listOfLi 是函数而非 JSX，且未触发重渲染。正确做法是让 listOfLi 成为计算属性（即 const listOfLi = items.map(...)），并在 JSX 中直接 {listOfLi}；
- 输入校验提升体验：示例中增加了 if (firstValue.trim() && secValue.trim()) 判断，防止空条目；
- 状态更新是异步的：setItems 使用函数式更新（prev => [...]）可确保基于最新状态，避免闭包问题；
- 命名规范建议：将 firtValue 改为 firstValue、hadnleChane 改为 handleFirstChange 等，增强可维护性（生产环境强烈推荐）。
通过以上模式，你不仅能实现动态添加列表项，更掌握了 React “状态 → 视图” 单向数据流的核心思想——UI 是状态的映射，操作 UI 即操作状态。
