React子组件setNumber失效：调用父组件setTotal时无法正常工作

问题根源 #

你这是把Ticket组件直接定义在了Booking组件内部，每次调用setTotal更新父组件的total状态时，Booking会重新渲染，这会导致内部的Ticket组件被重新定义——相当于每次渲染都是一个全新的组件，子组件里的number状态自然会被重置成初始值0，所以看起来setNumber没生效。

另外你直接用orders[index] = order修改数组的方式也不对，这是直接修改引用类型，React根本检测不到这个变化，也会导致状态更新出问题。

修复步骤 #

1. 把Ticket组件移到Booking组件外部，避免每次父组件渲染都重新创建子组件，导致状态丢失。
2. 通过props传递必要的参数和回调，把票数变更的处理逻辑放在父组件，子组件只负责渲染和触发变更事件。
3. 把orders改成React状态，严格遵循不可变更新原则，不能直接修改原数组。

修改后的代码示例 #

// 将Ticket组件移到Booking外部，避免重复创建
const Ticket = ({ ticket, index, selectedNumber, onTicketChange }: any) => {
  return (
    <div className="p-5 space-y-5 grid grid-cols-6">
      <select 
        name="number" 
        onChange={(e) => onTicketChange(index, Number(e.target.value))} 
        value={selectedNumber}
      >
        {/* 用循环生成选项，简化代码 */}
        {[...Array(11).keys()].map(num => (
          <option key={num} value={num}>{num}</option>
        ))}
      </select>
    </div>
  )
}

const Booking = () => {
  const [total, setTotal] = useState(0);
  // 把orders改成React状态，初始化为空数组（根据你的ticket数量初始化）
  const [orders, setOrders] = useState([]);
  // 假设你有一组ticket数据，这里需要根据实际情况定义
  // const [tickets, setTickets] = useState([]);

  const handleTicketChange = (index: number, newNumber: number) => {
    const ticket = tickets[index];
    // 生成新的订单对象
    const newOrder = {
      eventid: eventid,
      amt: ticket.price * newNumber,
      type: ticket.type,
      tickets: newNumber,
      email: userdata!.email,
      ticketid: ticket.ticketid,
    };
    // 复制原数组并修改对应项，遵循不可变更新
    const updatedOrders = [...orders];
    updatedOrders[index] = newOrder;
    setOrders(updatedOrders);

    // 计算总金额并更新
    const sum = updatedOrders.reduce((acc, order) => acc + order.amt, 0);
    setTotal(sum);
  };

  return (
    <div>
      {tickets.map((ticket, index) => (
        <Ticket 
          key={index} 
          ticket={ticket} 
          index={index}
          selectedNumber={orders[index]?.tickets || 0}
          onTicketChange={handleTicketChange}
        />
      ))}
      <div>总金额：{total}</div>
    </div>
  )
}

额外说明 #

• 组件嵌套定义是React开发的常见误区，会引发不必要的重渲染和状态丢失，尽量把组件放在外部，通过props传递数据和回调。
• 处理数组/对象状态时，必须用不可变方式更新（比如扩展运算符、数组方法返回新数组），否则React无法检测到状态变化，不会触发UI更新。
• 你之前用console.log(number)看不到最新值，是因为React状态更新是异步的，要查看最新值可以用useEffect监听number变化，或者在状态更新的回调里处理。

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