Redux中向数组元素添加userHoldings的实现问题

嘿，我懂你现在的困扰——你想让userHoldings乖乖待在coinData数组的第一个对象里，结果现在它成了状态里的独立属性，跟数组分离开是吧？我来帮你调整reducer的逻辑，搞定这个问题。

首先，先猜一下你之前可能写了类似这样的错误代码（毕竟我也踩过类似的坑）：

// 错误示例：userHoldings变成了独立属性
case 'UPDATE_PORTFOLIO':
  return {
    ...state,
    coinData: [...state.coinData],
    userHoldings: action.userHoldings // 这里直接把它加到了state根层级
  };

要实现你想要的结构，核心是不要把userHoldings作为state的独立属性返回，而是要修改coinData数组内部的第一个元素，把userHoldings合并进去。正确的写法应该是这样：

case 'UPDATE_PORTFOLIO':
  // 先复制原coinData数组，遵守Redux不可变更新的原则
  const updatedCoinData = [...state.coinData];
  
  // 把userHoldings合并到数组的第一个对象中，保留原对象的其他属性
  updatedCoinData[0] = {
    ...updatedCoinData[0], // 展开原对象，保留已有属性
    userHoldings: action.userHoldings // 添加/更新userHoldings
  };
  
  return {
    ...state,
    coinData: updatedCoinData // 用更新后的数组替换原数组
  };

这里要注意一个细节：如果你的coinData数组可能是空的，直接修改updatedCoinData[0]会报错，这时候可以加个判断来处理空数组的情况：

case 'UPDATE_PORTFOLIO':
  const updatedCoinData = [...state.coinData];
  
  if (updatedCoinData.length === 0) {
    // 如果数组为空，直接插入带userHoldings的新对象
    updatedCoinData.push({ userHoldings: action.userHoldings });
  } else {
    // 数组已有元素，合并到第一个对象里
    updatedCoinData[0] = { ...updatedCoinData[0], userHoldings: action.userHoldings };
  }
  
  return {
    ...state,
    coinData: updatedCoinData
  };

这样修改之后，userHoldings就会像你期望的那样，存在coinData数组的第一个元素对象里，和其他属性同处一个层级啦。

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