无Redux的React应用购物车状态更新实现方案咨询

在不使用Redux的情况下，我们可以利用React的单向数据流特性，将更新购物车状态的函数作为props从App组件传递给ShoppingCart子组件。因为只有拥有cart状态的App组件能调用setCart来修改状态，子组件只需要触发这些回调函数即可完成状态更新。

下面是完整的实现代码：

const App = () => { 
  const [cart, setCart] = useState({ lines: [], total: 0 }); 

  // 定义添加商品的函数
  const addOne = (lineToAdd) => {
    // 先检查购物车中是否已有该商品
    const existingLine = cart.lines.find(line => line.name === lineToAdd.name);
    if (existingLine) {
      // 如果存在，更新数量
      const updatedLines = cart.lines.map(line => 
        line.name === lineToAdd.name 
          ? {...line, quantity: (line.quantity || 1) + 1} 
          : line
      );
      // 重新计算总价
      const newTotal = updatedLines.reduce((sum, line) => sum + (line.price * line.quantity), 0);
      setCart({ lines: updatedLines, total: newTotal });
    } else {
      // 如果不存在，添加新商品行
      const newLine = {...lineToAdd, quantity: 1};
      const newTotal = cart.total + newLine.price;
      setCart({ 
        lines: [...cart.lines, newLine], 
        total: newTotal 
      });
    }
  };

  // 定义移除商品的函数
  const removeOne = (lineToRemove) => {
    const existingLine = cart.lines.find(line => line.name === lineToRemove.name);
    if (existingLine.quantity === 1) {
      // 如果数量为1，直接移除该行
      const updatedLines = cart.lines.filter(line => line.name !== lineToRemove.name);
      const newTotal = cart.total - existingLine.price;
      setCart({ lines: updatedLines, total: newTotal });
    } else {
      // 如果数量大于1，减少数量
      const updatedLines = cart.lines.map(line => 
        line.name === lineToRemove.name 
          ? {...line, quantity: line.quantity - 1} 
          : line
      );
      const newTotal = cart.total - existingLine.price;
      setCart({ lines: updatedLines, total: newTotal });
    }
  };

  // 定义清空购物车的函数
  const clearCart = () => {
    setCart({ lines: [], total: 0 });
  };

  return (
    <ShoppingCart 
      cart={cart} 
      onAddOne={addOne} 
      onRemoveOne={removeOne} 
      onClearCart={clearCart} 
    />
  ); 
} 

const ShoppingCart = ({ cart, onAddOne, onRemoveOne, onClearCart }) => { 
  return ( 
    <div>
      <table> 
        { cart.lines.map(l => (
          <tr key={l.name}>
            <td>{l.name} x {l.quantity}</td>
            <td>${l.price * l.quantity}</td>
            <td>
              <button onClick={() => onAddOne(l)}>+</button>
              <button onClick={() => onRemoveOne(l)}>-</button>
            </td>
          </tr>
        )) }
      </table>
      <div>Total: ${cart.total}</div>
      <button onClick={onClearCart}>清空购物车</button>
    </div>
  ); 
} 

关键要点解释： #

• 状态更新逻辑放在父组件：所有修改cart状态的逻辑（addOne、removeOne、clearCart）都定义在拥有cart状态的App组件中，这样能保证状态的单一数据源，避免状态分散难以维护。
• 回调函数作为props传递：把这些更新函数通过props传给ShoppingCart组件，子组件只需要在用户操作（点击按钮）时调用这些函数，不需要关心具体的状态更新细节，符合组件职责分离的原则。
• 不可变更新state：在更新cart时，我们始终创建新的数组或对象（比如使用[...cart.lines]、map、filter），而不是直接修改原有的state，这符合React对状态更新的要求（不可变性），能确保组件正确触发重新渲染。
• 添加key属性：在map渲染列表项时，给每个tr加上key属性（这里用商品名称，确保唯一），这是React列表渲染的最佳实践，能提升性能并避免渲染错误。

如果你的商品有唯一ID，建议用ID作为key和查找依据，比名称更可靠哦。

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