Redux中mapStateToProps后cuts对象仅显示首个键值对问题咨询

这问题我之前帮同事排查过类似的，大概率是mapStateToProps的处理逻辑有误，或者你在组件渲染时不小心只取了第一个值？结合你说的store和action里都正常，咱们从这几个方向入手：

1. 先检查mapStateToProps的代码 #

你是不是在mapStateToProps里对state.cuts做了不必要的处理？比如不小心只提取了第一个键值对？举个反例：

// 错误示例：只返回首个键值对
const mapStateToProps = (state) => {
  const firstEntry = Object.entries(state.cuts)[0];
  return {
    cuts: firstEntry ? { [firstEntry[0]]: firstEntry[1] } : {}
  }
}

正确的做法应该是直接返回完整的cuts对象，不要额外过滤：

// 正确示例：返回整个cuts对象
const mapStateToProps = (state) => {
  return {
    cuts: state.cuts
  }
}

2. 确认组件渲染时是否遍历了所有键值对 #

如果mapStateToProps没问题，那可能是渲染逻辑只处理了第一个元素。比如你是不是用了Object.values(cuts)[0]或者Object.entries(cuts)[0]来渲染？正确的遍历方式应该是用map循环所有键值对：

// 正确渲染所有cuts的示例
function YourComponent({ cuts }) {
  return (
    <div className="cuts-container">
      {Object.entries(cuts).map(([key, value]) => (
        <div key={key} className="cut-item">
          {key}: {value}
        </div>
      ))}
    </div>
  )
}

3. 最后再确认Reducer的更新逻辑（虽然你说store里正常，但还是要核对） #

虽然你提到console.log(state.cuts)是正常的，但还是要确保Reducer里是不可变更新，避免出现隐性问题。比如如果Reducer里是直接覆盖而不是合并，那store里的数据其实是错的，但可能你console.log的时候刚好看到的是最新一次的？正确的更新方式应该是：

const initialState = { cuts: {} };

function rootReducer(state = initialState, action) {
  switch(action.type) {
    case 'ADD_CUT':
      return {
        ...state,
        cuts: {
          ...state.cuts, // 先拷贝原有cuts的所有键值对
          [action.payload.key]: action.payload.value // 再添加新的键值对
        }
      };
    default:
      return state;
  }
}

先从mapStateToProps开始查，这是最容易出问题的地方，尤其是如果你不小心加了过滤逻辑的话。如果还是没解决，可以把mapStateToProps的代码贴出来，我再帮你看～

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