React报错：Type 'void'无法赋值给类型'ReactNode'问题求助

错误原因拆解 #

1. Type 'void' is not assignable to type 'ReactNode'
   你的calculateTotal函数未返回计算结果——reduce方法计算出总价后没有通过return语句返回，导致函数默认返回void类型。当你在JSX的<p>标签中使用这个函数时，React期望此处是ReactNode类型的值，void显然不匹配，因此触发报错。

2. This JSX tag's 'children' prop expects a single child of type 'ReactNode', but multiple children were provided.
   这个错误来自MUI的Stack组件：当购物车有商品时，Stack下直接存在多个子节点（列表项、总价文本），部分场景下MUI组件会对children的结构有更严格的要求，多个零散子节点会触发类型校验失败。

修复方案 #

1. 修复calculateTotal的返回值 #

给函数添加return语句，返回reduce的计算结果，也可以用箭头函数的隐式返回简化代码：

// 写法1：显式return
const calculateTotal=(items: CartItemType[])=>{
  return items.reduce((ack:number,item)=>ack + item.amount* item.price, 0)
}

// 写法2：隐式返回（更简洁）
const calculateTotal=(items: CartItemType[])=>
  items.reduce((ack:number,item)=>ack + item.amount* item.price, 0)

2. 调整Stack组件的子节点结构 #

将购物车有商品时的列表项和总价用React片段（<>）包裹，让它们成为Stack的单个子节点，避免多子节点的类型校验问题：

return (
  <Stack sx={{width:'25em'}}>
    <h4>Your Shopping Cart</h4>
    {cartItem.length === 0 ? (
      <p>No items in cart.</p>
    ) : (
      <>
        {cartItem.map(item=>(
          <CartItem key={item.id} item={item} addToCart={addToCart} removeFromCart={removeFromCart}/>
        ))}
        <p>Total: ${calculateTotal(cartItem)}</p>
      </>
    )}
  </Stack>
)

完整修复后的代码 #

import CartItem from "./CartItem"
import {CartItemType} from '../App'
import {Typography,Stack} from '@mui/material';
type Props ={
    cartItem:CartItemType[];
    addToCart:(clickedItem: CartItemType)=>void;
    removeFromCart:(id:number) => void;
}
const Cart: React.FC<Props> = ({cartItem,addToCart,removeFromCart}) => {
  const calculateTotal=(items: CartItemType[])=>
    items.reduce((ack:number,item)=>ack + item.amount* item.price, 0)

  return (
    <Stack sx={{width:'25em'}}>
        <h4>Your Shopping Cart</h4>
        {cartItem.length === 0 ? (
          <p>No items in cart.</p>
        ) : (
          <>
            {cartItem.map(item=>(
              <CartItem key={item.id} item={item} addToCart={addToCart} removeFromCart={removeFromCart}/>
            ))}
            <p>Total: ${calculateTotal(cartItem)}</p>
          </>
        )}
    </Stack>
  )
}

export default Cart

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