Question

...在分派中，在以下路径中：“ chat.messages.0”，查看处理操作的减速器{'type'：'chat'，'payload'：{'sender' ：'you'，'body'：'foo'}}`

我的减速器：

chatMessage.js:
export default (state, action) => {
    return Object.assign({}, {
        ...state,
        messages: [...state.messages, action.payload]
    })
}

有趣的是，如果我在聊天组件中使用messages=[]，则不会出现此错误。

export default class Chat extends React.Component {
  state = {...this.props.data, input: "", toggle: false}

  _renderItem = ({item}) => {
    return <ChatMessageRow data={item} />
  }

  render() {
    // var {messages} = this.state
    var messages = []
return (
      <View style={styles.container}>
        <FlatList
          inverted
          renderItem={this._renderItem}
          style={styles.logWrapper}
          data={messages.reverse()}
          extraData={this.state.toggle}
        />

从我的主要观点来看，它绑定到Redux：

return (...other views... check if tabIndex == 1, show <Chat data={this.props.chat} ... />

我之前遇到问题，因为Chat中的FlatList呈现未更新，我不得不做

this.setState({messages: messages.push(newMessage), toggle: !this.state.toggle})

以更新状态，以便统一列表可以识别它已更改。

现在，我使用connect和redux从聊天存储中加载数据，然后将数据传递到组件中。

添加聊天消息后尝试重新加载聊天组件时出现错误。奇怪的是，我可以更新其中一个，但是添加一个之后就不会显示其他。

起初，我认为这是我的化简器中的一个问题，因此我重写了化简器以使用对象分配和数组扩展运算符。

现在我认为这与出乎意料的渲染有关。

我该如何调试？

编辑：

不是“它可以添加1条消息”。是的-我可以一次将视图移出焦点，然后重新聚焦。所以..

打开聊天标签观察者1消息使用redux操作添加N条消息进行存储更改标签，恢复为聊天已添加观察者N条消息添加M条消息更改选项卡，单击返回到聊天选项卡错误显示

编辑：

我尝试过

using ...spread, but redux still throws warning about state mutation的建议在做

    export default (state, action) => {
        return Object.assign({}, {
            ...state,
            messages: state.messages.map(value => Object.assign({}, value)).concat(action.payload)
        })
    }

在我的减速器中，同样的错误。

编辑：

我的减速器已更新为chatMessage.js

我认为问题在于我如何称呼它。

我正在编写一个websocket控制器。发送消息时，不需要像HTTP响应那样等待响应。

我的websocket控制器：

    onMessage = ({data}) => {
        const json = JSON.parse(data)
        if (json) {
            if (json.status) {
                const reducer = this.stateFilters[json.status]
                if (reducer) {
                    reducer(json.body)
                } else {
                    console.log("No reducer")
                }
            }
        }
    }

在我的View组件中创建了websocket控制器：

my main view

import {ChatStateFilters} from '../../reducers/chat'

const mapDispatch = { chatMessage }

this.wsController = new WebSocketController({
      stateFilters: {chatMessage: this.props.chatMessage},

来自聊天还原工具文件（包含chatMessage还原工具）

创建切片时会创建这些状态过滤器。

stateFilter ['chatMessage']的值-这是绑定到mapDispatchToProp中我的View道具的值

是这个功能

let fn = (payload) => {
      return dispatch => {
          dispatch(stateFilters[actionName](payload))
      }
    }
exportedStateFilters[actionName] = fn

我认为问题出在这里^ ......调度正在触发，正在更新状态，但是redux不知道调度已完成

编辑2：

我认为缺少异步可能是一个问题。因此，我将stateFilter（绑定到视图中的prop的fn）更改为：

   let fn = (payload) => {
      return dispatch => {
        post("", {}, true)
        .then(response => {
          dispatch(stateFilters[actionName](payload))
        })
        .catch(error => {
          dispatch(stateFilters[actionName](payload))
        })
      }
    }

现在它可以工作多次。然后给我一个错误“在两次调度之间检测到状态突变”。

我的聊天消息减少程序仍然是

export default (state, action) => {
    let messages2 = Object.assign([], [...state.messages, action.payload])
  return Object.assign({}, {...state, messages: messages2 })
}

那为什么会发生此错误？

在调度内检测到状态突变（不是“在调度之间”）

0 个答案: