React中通过Props使用Map方法？组件渲染数据异常求助

你的代码无法渲染数组内容的核心原因是没有用React状态管理支出记录数组，而是用了普通局部变量arr。React不会监听普通变量的变化，所以即使你点击按钮往arr里push数据，组件也不会重新渲染，History组件拿到的始终是空数组，自然无法渲染出内容。

修复方案 #

1. 将支出记录数组改为React状态

把原来的普通数组const arr = []替换为useState状态，初始值设为空数组：

const [expenses, setExpenses] = useState([]);

2. 修改点击事件处理函数，正确更新状态数组

不能直接用push修改状态数组（React状态是不可变的），需要创建新数组来更新状态：

const clickHandler = function () {
  // 用展开运算符创建新数组，添加新的支出记录
  setExpenses(prevExpenses => [...prevExpenses, {
    expense: expense,
    amount: amount,
  }]);
};

3. 调整渲染逻辑（可选但推荐）

不需要单独用state变量控制History组件的显示，直接通过expenses.length > 0判断即可，同时给map生成的元素添加唯一key：

修改后的Input组件完整代码：

import History from "./History";
import { useState } from "react";

const Input = function () {
  const [expense, setExpense] = useState("");
  const [amount, setAmount] = useState("");
  // 用状态管理支出记录数组
  const [expenses, setExpenses] = useState([]);

  const expenseChangeHandler = function (e) {
    setExpense(e.target.value);
  };
  const amountChangeHandler = function (e) {
    setAmount(e.target.value);
  };
  const clickHandler = function () {
    // 不可直接修改状态，创建新数组更新
    setExpenses(prev => [...prev, { expense, amount }]);
    // 清空输入框
    setExpense("");
    setAmount("");
  };

  return (
    <div>
      <input
        value={expense}
        onChange={expenseChangeHandler}
        placeholder="支出项目"
      ></input>
      <input
        value={amount}
        onChange={amountChangeHandler}
        placeholder="金额"
        type="number"
      ></input>
      <button onClick={clickHandler}>Add</button>
      {/* 根据数组长度判断是否渲染History */}
      {expenses.length > 0 && <History arr={expenses}></History>}
    </div>
  );
};

export default Input;

修改后的History组件（添加key）：

import "./History.css";

const History = function (props) {
  const arr = props.arr;
  // 给每个map元素添加唯一key，建议用唯一id，这里暂用索引（动态列表不推荐用索引，仅作示例）
  const newArr = arr.map((el, index) => <p key={index}>{el.expense} - {el.amount}</p>);
  return (
    <div className="div1">
      <h2>History</h2>
      <div>{newArr}</div>
    </div>
  );
};

export default History;

关键说明 #

• React状态是不可变的，必须通过状态更新函数（setExpenses）并传递新值来修改状态，这样才会触发组件重新渲染。
• 子组件History会在父组件状态更新时，收到最新的arr props，进而重新执行map渲染列表内容。

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