如何在 React 中通过按钮点击动态添加列表项（li）

✅ 正确做法：用数组状态管理列表项

首先，声明一个用于存储所有待显示条目的数组状态：

const [values, setValues] = useState([]);

该数组每一项代表一个

function handleClick() {
  // 拼接 Item 和 Amount，避免空值导致冗余空格
  const newItem = `${firtValue.trim()} ${secValue.trim()}`.trim();
  if (newItem) {
    setValues(prev => [...prev, newItem]); // 推荐使用函数式更新
  }
}

⚠️ 注意：使用 setValues(prev => [...prev, newItem]) 而非 setValues(values.concat(...))，既符合 React 最佳实践（避免闭包陷阱），也更语义清晰。

接着，在 JSX 中直接渲染该数组：

Dang.ai

Dang.ai是一个AI工具目录集，已收集超过5000+ AI工具

下载

<ul>
  {values.map((item, index) => (
    <li key={index}>{item}</li>
  ))}
</ul>

⚠️ key 属性不可省略：React 要求列表渲染时每个元素必须有唯一、稳定、可预测的 key。此处使用 index 可行（因列表仅追加、不重排/删除），但若后续需支持编辑或删除，建议改用唯一 ID（如 Date.now() 或 uuid）。

? 修复原始代码的关键问题

• ❌ listOfLi() 是一个函数调用，但未返回 JSX 数组，且未被正确调用；
• ❌ handleClick 中仅调用 listOfLi()，但未触发重新渲染——React 中只有 state 或 props 变化才会触发 re-render；
• ❌ 输入状态名存在拼写错误（firtValue → 建议改为 firstValue 提升可维护性）；
• ❌ onChange 事件处理器命名不一致（hadnleChane / hadnleChan），易引发维护风险。

✅ 完整优化版核心逻辑（含健壮性增强）

// 状态声明（修正拼写 + 新增 values）
const [firstValue, setFirstValue] = useState("");
const [secondValue, setSecondValue] = useState("");
const [values, setValues] = useState([]);

// 输入处理（精简统一）
const handleFirstChange = (e) => setFirstValue(e.target.value);
const handleSecondChange = (e) => setSecondValue(e.target.value);

// 添加条目（带空值校验与函数式更新）
const handleClick = () => {
  const combined = `${firstValue.trim()} ${secondValue.trim()}`.trim();
  if (combined) {
    setValues(prev => [...prev, combined]);
    // 可选：清空输入框
    setFirstValue("");
    setSecondValue("");
  }
};

// 列表渲染（安全 + key 合规）
const listItems = values.map((text, i) => (
  <li key={`item-${i}`}>{text}</li>
));

最后，在 JSX 中使用：

<div className="add-item">
  Item
  <input 
    type="text" 
    value={firstValue} 
    onChange={handleFirstChange} 
    placeholder="Add Item" 
  />
</div>

<div className="add-item">
  Amount
  <input 
    type="number" 
    value={secondValue} 
    onChange={handleSecondChange} 
    placeholder="Add Amount" 
  />
</div>

<button type="button" onClick={handleClick}>Add Expense</button>

<ul>{listItems}</ul>

? 提示：为提升用户体验，建议为输入框添加 value 属性（受控组件），并点击后清空输入框；同时对 type="number" 的输入做防 NaN 处理（如 parseFloat(secondValue) || 0），避免显示 "Item NaN"。

掌握这一模式，你不仅能动态添加