React点击addCart按钮动态新增相同Bets组件的实现问题

问题原因 #

你当前的代码在调用setGetAddCart更新状态时，直接传入了仅包含新Bets组件的全新数组，完全覆盖了原有的状态数组内容，因此只会替换原有内容，无法实现追加新增的效果。另外原代码return语句中返回了两个同级根元素，不符合React单根节点的语法要求，会直接抛出语法错误。

修复方案 #

快速修复版（直接调整数组更新逻辑） #

仅修改addCart方法，通过状态更新的回调函数拿到旧数组，用展开运算符保留原有内容后追加新组件，同时给列表元素添加唯一key避免React警告：

const newBet: React.FC = () => {
  const [getAddCart, setGetAddCart] = useState([
    <BetsEmpty key="empty">Empty Cart</BetsEmpty>,
  ]);


  function addCart() {
    // 用回调方式拿到旧状态，展开旧数组后追加新组件
    setGetAddCart(prevList => [
        ...prevList,
        <Bets key={Date.now()}>
           Example Number
        </Bets>,
    ]);
  }

  return(
    {/* 用空标签包裹两个根元素，满足React单根节点要求 */}
    <>
      <AllBets>{getAddCart}</AllBets>
      <Button onClick={addCart}></Button>
    </>
  )
}

规范优化版（State存数据而非JSX） #

更推荐的写法是将纯数据存在State中，渲染阶段再映射为JSX组件，便于后续对列表项做修改、删除等拓展操作，也更符合React的状态设计原则：

const newBet: React.FC = () => {
  // state仅存储列表数据，不存JSX元素
  const [betList, setBetList] = useState<{id: number, content: string}[]>([]);

  function addCart() {
    setBetList(prevList => [
        ...prevList,
        // 新增数据项，用时间戳作为唯一ID
        {id: Date.now(), content: 'Example Number'}
    ]);
  }

  return(
    <>
      <AllBets>
        {/* 渲染时根据数据长度判断显示空态还是列表 */}
        {betList.length === 0 ? (
          <BetsEmpty>Empty Cart</BetsEmpty>
        ) : (
          betList.map(item => (
            <Bets key={item.id}>{item.content}</Bets>
          ))
        )}
      </AllBets>
      <Button onClick={addCart}></Button>
    </>
  )
}

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