Question

我有两个容器StatedUser和StatedHeader。它与组件User和Header相关联它们都接收state.user作为道具。某些操作更改state.user后，组件用户props.user会更改，但标题不会更改。

这是我的代码container StatedHeader

import Header from '../components/common/Header'
import {connect} from 'react-redux'
import {showConfirm} from '../actions'

const mapStateToProps = state => {
  console.log(`header user --> ${JSON.stringify(state.user)}`)
  return {
    user: state.user,
    headerFix: state.headerFix       
  }
}

const mapDispatchToProps = dispatch => {
  return {
    openSignoutDialog: () => {
      dispatch(showConfirm(true))
    }
   }
 }

 const StatedHeader = connect(
   mapStateToProps,
   mapDispatchToProps)(Header)

 export default StatedHeader

------------------------------编辑---------------- ---------------------

const  initialState = {
  user: {},
  displayFlag: false,
  headerFix: false
}

function blogApp (state, action) {
  if (typeof(state) === 'undefined') {
  return initialState
}

switch(action.type) {
  case 'SIGN_IN':
    return Object.assign({}, state, {user: action.user})
  // update user what i mentioned in the question
  case 'UPDATE_AVATAR':
    return Object.assign({}, state, {user: action.user})
  case 'SIGN_OUT':
    return Object.assign({}, state, {user: {}})
  case 'SHOW_CONFIRM':
    return Object.assign({}, state, {displayFlag: action.displayFlag})
  case 'HEADER_FIX':
    return Object.assign({}, state, {headerFix: action.headerFix})
  default: 
    return state
  }
}

export default blogApp

顺便说一下，console.log的结果发现state.user确实按预期发生了变化，但组件的道具没有改变。
顺便说一下，我的reac-redux版本是 V5.0.5 关于它的任何想法？谢谢！

Answer 1

在跟踪了这个bug很长一段时间之后，我终于解决了它。在UPDATE_AVATAR中发现了axios.post(`/user/${this.state.author._id}/avatar`, formData) .then(res=> { this.setState({author: {avatar: res.data.avatar}}) let user = this.props.user //what should cause the bug. user.avatar = res.data.avatar this.props.changeAvatar(user) }) .catch(e => console.log(e.message))。

changeAvatar

我在这里做的是向发布用户的头像发送http请求，然后通过发送触发User.js来更新应用的状态。

在调试过程中，如下面的代码在断点之间跳转，我发现redux将检查传递给它的对象。

在javascript中，对象通过引用传递给= operator.so我用user = Object.assign({}, this.props.user)替换我在get appTitle() { return this.titleService.title }中指向的内容然后它可以工作！虽然我不知道实际的原因，但它确实解决了！

mapStateToProps被调用，但组件道具不会改变？

1 个答案: