Question

我有一个聊天小部件，就像facebook聊天小部件一样。我正在向上滚动时实现无限加载的消息。我现在遇到的问题是如何将下一个消息范围与前一个消息组合起来，因为当我调用下一个范围时，它会替换先前的范围。为简洁起见，我剪切了我的代码示例：

constructor(props) {
  super(props);
  this.props.getMessages(1) // axios call, returns first range
}

handleScroll(event) {
  //some scroll logic
  this.props.getMessages(2) 
  //axios call, returns 2nd range
  //for simplicity i just call 2 ranges for now
}


function mapStateToProps(state) {
  return {
    messages: state.messages
  };
}

export default function (state = {fetched: false}, action) {
  switch (action.type) {
      case 'FETCH_MESSAGES_FULFILLED':
          return {...state,
            data: action.payload
          }
      break;
   }
   return state;
}

数据模型：

[
        {   
            msg_id: 1,
            to_id: 1,
            from_id: 2,
            message: "Marzipan jelly-o croissant sweet gummies chocolate croissant marzipan. Jujubes soufflé tiramisu halvah chocolate oat cake jelly1"
        },
        {   
            msg_id: 2,
            to_id: 1,
            from_id: 2,
            message: "Jelly sw2"
        }
]

Answer 1

您希望将消息附加到数据而不是替换它。你可以使用像

这样的扩展运算符语法来简单地完成它

var initialState = {
    fetched: false,
    data: []
}
export default function (state = initialState, action) {
  switch (action.type) {
      case 'FETCH_MESSAGES_FULFILLED':
          return {...state,
            data: [...state.data, action.payload]
          }
      break;
   }
   return state;
}

这假设data是一个数组。

将数组与React和Redux相结合

1 个答案: