была обнаружена мутация состояния внутри отправки (НЕ «между» отправкой) - PullRequest
Новая
       63

была обнаружена мутация состояния внутри отправки (НЕ «между» отправкой)

0 голосов
/ 26 сентября 2019

... внутри отправки по пути: "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} ... />

Я столкнулся с проблемой ранее, когда рендеринг FlatList в чате не обновлялся, и у меня былосделать

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

, чтобы обновить состояние, чтобы плоский список распознал, что оно изменилось.

Теперь я загружаю свои данные из хранилища чата, используя connect иредукс, затем передавая эти данные в компонент.

Я получаю сообщение об ошибке при попытке перезагрузить компонент чата после добавления сообщений чата. Странно, но я могу получить один для обновления, но после добавления одного он не будет отображать другие.

Сначала я думаю, что это проблема в моем редукторе, поэтому я переписываю редуктор, чтобы использовать операцию назначения объектов и расширения массива.r.

Теперь я думаю, что это связано с неожиданным рендерингом.

Как мне отладить это?

РЕДАКТИРОВАТЬ:

Это не "работает с добавлением 1 сообщения ".Это - я могу вывести изображение из фокуса и вернуть его в фокус один раз.Итак ..

Открыть сообщение обозревателя вкладок чата 1 Добавить N сообщений для хранения с помощью редукционных действий Изменить вкладки, вернуться к Обозревателю чатов Добавлено N сообщений Добавить добавленные М сообщений изменить вкладки, вернуться на вкладку чатов Показывает ошибки

РЕДАКТИРОВАТЬ:

Я пытался

с использованием ... распространения, но при редуксе по-прежнему выдает предупреждение о мутации состояния * Предложение 1041 * делает 

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

в моем редукторе, та же ошибка.

РЕДАКТИРОВАТЬ:

Мой редуктор обновляется до chatMessage.js

Я думаю, проблема в том, как я это называю.

Я пишу контроллер веб-сокета.Мне не нужно ждать ответа, когда я отправляю сообщение с HTTP-ответом.

Мой контроллер веб-сокета: 

    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")
                }
            }
        }
    }

контроллер веб-сокета создается в моем представлениикомпонент: 

my main view

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

const mapDispatch = { chatMessage }

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

из файла редуктора чата (который содержит редуктор chatMessage)

Эти фильтры состояния создаются при создании моего среза.

Значение stateFilter['chatMessage'] - это значение того, что связано с опорой моего View в mapDispatchToProp

, это функция: 

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

Я думаю, что проблема где-то здесь^ ... каким-то образом отправка отправляет, обновляя состояние, но Redux не знает, что отправка завершена

РЕДАКТИРОВАТЬ 2:

Я думал, что отсутствие асинхронности могло быть проблемой.Поэтому я изменил stateFilter (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 })
}

, так почему же происходит эта ошибка?

...