react-redux 容器获得新的道具，但孩子不更新

Question

我的 redux 商店正在成功更新。容器有新的道具，但孩子们仍然有旧的。

我在谷歌上搜索到的这类事情大多发生在突变中。但据我所知，我没有任何突变。

这是我的容器组件Chat.jsx

import '../../../assets/stylesheets/styles.scss'

import React, { Component } from 'react'
import { connect } from 'react-redux'

import setContactId from '../redux/actions/setContactId'
import setChat from '../redux/actions/setChat'
import submitEmail from '../redux/actions/submitEmail'
import submitMessage from '../redux/actions/submitMessage'

import ddp from '../../ddp'

import Cookies from 'js-cookie'

import View from './views/View'
import Icon from './Icon'

class Chat extends Component {
  componentDidMount () {
    this.setContactIdFromCookies()
  }

  setContactIdFromCookies = () => {
    const contactId = Cookies.get('b2cContactId')
    if (contactId) this.props.setContactId(contactId)
  }

  componentWillReceiveProps = (nextProps) => {
    if (!nextProps.contactId) return
    this.getChat(nextProps.contactId)
  }

  getChat = async (contactId) => {
    console.log('getChat', contactId)
    await ddp.subscribe('Chats', {contactId})
    const chatCollection = ddp.getCollection('Chats')
    console.log('chatCollection', chatCollection)
    this.props.setChat(this.extractChatFromCollection(chatCollection))
    ddp.watch('Chats', (changedDoc, message) => {
      console.log('Chats collection item changed', changedDoc, message)
      const chatCollection = ddp.getCollection('Chats')
      this.props.setChat(this.extractChatFromCollection(chatCollection))
    })
  }

  extractChatFromCollection = collection => {
    const chatId = Object.keys(collection)[0]
    const chat = collection[chatId]
    chat._id = chatId
    return chat
  }

  emailInputRef = null

  onEmailSubmit = e => {
    e.preventDefault()
    console.log('email', this.emailInputRef.value,)

    this.props.submitEmail({
       email: this.emailInputRef.value,
       convertedPage: window.location.href,
       projectId: this.props.projectId,
       visitSessionId: this.props.visitSessionId
     })
  }

  render () {
    if (!this.props.chat._id) return null
    return (
      <div>
        <View
          visitSessionId={this.props.visitSessionId}
          defaultAdminUserName='default defaultAdminUserName'
          contactName='default contactName'
          supportName='default supportName'
          messages={this.props.chat.messages}
          onSend={this.props.submitMessage}
         />
        <Icon />
      </div>
    )
  }
}

// DONE: REDUX
// DONE: Meteor client???
// TODO: Components

Chat = connect(state => ({
  contactId: state.contactId,
  chat: state.chat
}), { setContactId, setChat, submitEmail, submitMessage })(Chat)

export default Chat

这里是View.jsx

import React from 'react'
import PropTypes from 'prop-types'

import Messages from './Messages'
import Input from './Input'

const View = props => <div id='chat-container'>
  <div className='chat-box' style={{
    maxWidth: '350px',
    height: '469px',
    background: 'gainsboro',
    WebkitBoxShadow: '0px 0px 20px 0px rgba(0,0,0,0.75)',
    MozBoxShadow: '0px 0px 20px 0px rgba(0,0,0,0.75)',
    boxShadow: '0px 0px 20px 0px rgba(0,0,0,0.75)'
  }}>
    <div className='chat-header' style={{
      color: '#fff',
      backgroundColor: '#5ebe76',
      fontSize: '22px',
      fontWeight: 'bold',
      padding: '10px 15px'
    }}>
      <p>{props.supportName}</p>
    </div>
    <Messages
      defaultAdminUserName={props.defaultAdminUserName}
      contactName={props.contactName}
      messages={props.messages}
    />
    <Input
      visitSessionId={props.visitSessionId}
      onSend={props.onSend} />
  </div>
</div>

View.propTypes = {
  visitSessionId: PropTypes.string.isRequired,
  defaultAdminUserName: PropTypes.string.isRequired,
  contactName: PropTypes.string.isRequired,
  supportName: PropTypes.string.isRequired,
  messages: PropTypes.array.isRequired,
  onSend: PropTypes.func.isRequired
}

export default View

这里有一些动作

setChat.js

import { SET_CHAT } from '.'

export default function (chat) {
  return {
    type: SET_CHAT,
    payload: chat
  }
}

setContactId.js

import { SET_CONTACT_ID } from '.'

export default function (contactId) {
  return {
    type: SET_CONTACT_ID,
    payload: contactId
  }
}

这里是submitMessage.js，这是我唯一做脏事的地方。

import ddp from '../../../ddp'

export default function ({ message, visitSessionId }) {
  return (dispatch, getState) => {
    ddp.call('chat.submitContactMessage', { message, visitSessionId, contactId: getState().contactId }).then((res) => {
      console.log('res', res)
    })
  }
}

这会向我的数据库发送更新。数据库得到更新。容器中的订阅功能工作正常。使用SET_CHAT 操作获取新文档并将其设置到存储中。在 devtools 中，我可以看到商店中的新聊天和 Chat.jsx 道具。但是View.jsx 没有得到新的道具。

这里是减速器chatReducer.jsx

import { SET_CHAT } from '../actions'

export default function (state = {}, action) {
  switch (action.type) {
    case SET_CHAT:
      return action.payload
  }

  return state
}

contactId.js

import { SET_CONTACT_ID } from '../actions'

export default function (state = '', action) {
  switch (action.type) {
    case SET_CONTACT_ID:
      return action.payload
  }

  return state
}

还有我的rootReducer

import { combineReducers } from 'redux'

import contactId from './contactId'
import chatReducer from './chatReducer'

const rootReducer = combineReducers({
  contactId,
  chat: chatReducer
})

export default rootReducer

Answer 1

我想extractChatFromCollection 会导致你的突变问题，试试这个：

  extractChatFromCollection = collection => {
    const chatId = Object.keys(collection)[0]
    const chat = {
      ...collection[chatId],
      _id: chatId,
    };
    return chat
  }

Answer 2

我刚刚在一个我一直在努力制作的 React 应用程序中解决了一个类似的问题。每当我的容器看到来自 Redux 的更新属性时，我必须为我的子组件提供不同的“关键”属性。

• 您的减速器是否正确地复制了状态？ 见https://blog.jakoblind.no/react-component-not-updating/

• 您的子组件是否会接受“关键”属性，使它们在每次状态更改后都是唯一的？