Reactjs 即使存储已更新，Redux也不会重新渲染React组件

嗨，我是Redux新手，我正在使用React和Redux尝试构建一个UI，在这个UI中，我可以将文件（本例中为发票）拖放到UI的一部分，在列表中呈现它们，然后能够启动一个popover来编辑与每个发票关联的元数据。拖放操作正常-每次拖放文件和更新列表时，Redux都会重新渲染视图。但是，当我尝试对每个发票单击编辑按钮时，商店正在更新，但我的popover组件中的道具没有更新。实际上，当我尝试单击“编辑发票”按钮时，看起来根本没有发生任何重新渲染

App.js

import React from 'react'
import AddInvoice from '../containers/AddInvoice'
import CurrentInvoiceList from '../containers/CurrentInvoiceList'
import ControlPopover from '../containers/ControlPopover'

const App = () => (
  <div>
    <AddInvoice />
    <CurrentInvoiceList />
    <ControlPopover />
  </div>
)

export default App

容器/CurrentInvoiceList.js

import { connect } from 'react-redux'
import { showInvoiceEditPopover } from '../actions'
import InvoiceList from '../components/InvoiceList/InvoiceList'

const mapStateToProps = state => {
  return {
    invoices: state.invoices
  }
}

const mapDispatchToProps = dispatch => ({
  handleEditInvoice: invoice => {
    dispatch(showInvoiceEditPopover(invoice))
  }
})

const CurrentInvoiceList = connect(
  mapStateToProps,
  mapDispatchToProps
)(InvoiceList)

export default CurrentInvoiceList

import React from 'react'
import PropTypes from 'prop-types'
import Invoice from '../Invoice/Invoice'

const InvoiceList = ({ invoices, handleEditInvoice }) => {

return (
  <div>
    {invoices.map(invoice =>
      <Invoice
        key={invoice.id}
        invoice={invoice.invoiceData}
        onClick={event => {
          // here we invoke the action bound by the CurrentInvoiceList
          // container
          event.preventDefault()
          handleEditInvoice(invoice)
        }}
      />
    )}
  </div>
 )
}

InvoiceList.propTypes = {
  invoices: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.number.isRequired,
    invoiceData: PropTypes.object
  }).isRequired).isRequired,
  handleEditInvoice: PropTypes.func.isRequired
}

export default InvoiceList

actions/index.js

let nextInvoiceId = 0
export const addInvoice = invoice => ({
  type: 'ADD_INVOICE',
  id: nextInvoiceId++,
  invoiceData: invoice
})

export const showInvoiceEditPopover = invoice => ({
  type: 'SHOW_POPOVER',
  invoice
})

const popover = (state = {}, action) => {
  switch (action.type) {
    case 'SHOW_POPOVER':
      const popoverState = {}
      popoverState.isActive = true
      popoverState.data = action.invoice
      return popoverState

     case 'CLOSE_POPOVER_WITHOUT_SAVING':
       const inactiveState = {}
       inactiveState.isActive = false
       inactiveState.data = {}
       return inactiveState;
     default:
       return state
   }
}

export default popover

popover reducer（在应用程序中组合，但为简洁起见，此处内联）reducer/index.js

let nextInvoiceId = 0
export const addInvoice = invoice => ({
  type: 'ADD_INVOICE',
  id: nextInvoiceId++,
  invoiceData: invoice
})

export const showInvoiceEditPopover = invoice => ({
  type: 'SHOW_POPOVER',
  invoice
})

const popover = (state = {}, action) => {
  switch (action.type) {
    case 'SHOW_POPOVER':
      const popoverState = {}
      popoverState.isActive = true
      popoverState.data = action.invoice
      return popoverState

     case 'CLOSE_POPOVER_WITHOUT_SAVING':
       const inactiveState = {}
       inactiveState.isActive = false
       inactiveState.data = {}
       return inactiveState;
     default:
       return state
   }
}

export default popover

组件/InvoiceList.js

import { connect } from 'react-redux'
import { showInvoiceEditPopover } from '../actions'
import InvoiceList from '../components/InvoiceList/InvoiceList'

const mapStateToProps = state => {
  return {
    invoices: state.invoices
  }
}

const mapDispatchToProps = dispatch => ({
  handleEditInvoice: invoice => {
    dispatch(showInvoiceEditPopover(invoice))
  }
})

const CurrentInvoiceList = connect(
  mapStateToProps,
  mapDispatchToProps
)(InvoiceList)

export default CurrentInvoiceList

import React from 'react'
import PropTypes from 'prop-types'
import Invoice from '../Invoice/Invoice'

const InvoiceList = ({ invoices, handleEditInvoice }) => {

return (
  <div>
    {invoices.map(invoice =>
      <Invoice
        key={invoice.id}
        invoice={invoice.invoiceData}
        onClick={event => {
          // here we invoke the action bound by the CurrentInvoiceList
          // container
          event.preventDefault()
          handleEditInvoice(invoice)
        }}
      />
    )}
  </div>
 )
}

InvoiceList.propTypes = {
  invoices: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.number.isRequired,
    invoiceData: PropTypes.object
  }).isRequired).isRequired,
  handleEditInvoice: PropTypes.func.isRequired
}

export default InvoiceList

---

我知道这是一个大量的示例代码，所以我尽量保持它的简短和重点，同时给出应用程序的全面视图。非常感谢您的帮助。

我相信您的问题在于

mapDispatchToProp

函数的格式不正确

您需要返回具有方法的对象。这些方法将作为道具提供给您连接的组件

例如：

const mapDispatchToProps = ( dispatch ) => {
    return {
        doSomething: ( arguments ) => {
            // here you can dispatch and use your arguments
        } 
    };
}

doSomething

是将提供给连接部件的道具

所有mapDispatchToProps函数的格式都不正确

旁注/意见-TLDR：

在将来，如果你有很多代码要发布，我相信如果把这些片段链接在一起会更容易理解

即

身体

页脚

我不知道您的代码是否不同，但您的

mapStateToDispatch

函数的格式仍然不正确

改变这个

const mapDispatchToProps = dispatch => ({
  handleEditInvoice: invoice => {
    dispatch(showInvoiceEditPopover(invoice))
  }
})

为此：

const mapDispatchToProps = dispatch => ({
  return {
    handleEditInvoice: invoice => {
      dispatch(showInvoiceEditPopover(invoice))
    }
  };
})

---

我相信您的问题在于

mapDispatchToProp

函数的格式不正确

您需要返回具有方法的对象。这些方法将作为道具提供给您连接的组件

例如：

const mapDispatchToProps = ( dispatch ) => {
    return {
        doSomething: ( arguments ) => {
            // here you can dispatch and use your arguments
        } 
    };
}

doSomething

是将提供给连接部件的道具

所有mapDispatchToProps函数的格式都不正确

旁注/意见-TLDR：

在将来，如果你有很多代码要发布，我相信如果把这些片段链接在一起会更容易理解

即

身体

页脚

我不知道您的代码是否不同，但您的

mapStateToDispatch

函数的格式仍然不正确

改变这个

const mapDispatchToProps = dispatch => ({
  handleEditInvoice: invoice => {
    dispatch(showInvoiceEditPopover(invoice))
  }
})

为此：

const mapDispatchToProps = dispatch => ({
  return {
    handleEditInvoice: invoice => {
      dispatch(showInvoiceEditPopover(invoice))
    }
  };
})

---

问题出在containers/ControlPopover.js和

mapstatetops

函数中。

isActive

属性需要分配给

state.popover.isActive

问题在于containers/ControlPopover.js和

mapStateToProps

函数。需要将

isActive

属性分配给

state.popover.isActive

是否调用控制popover的mapStateToProps？此外，控制popover中的mapDispatchToProps看起来很奇怪。我相信您需要修改它以返回像MapStateTops这样的函数。这可能引发了一个错误，导致状态更新无法传播。正在调用mapStateToProps，但我绑定到了错误的对象属性是否调用了控件Popover的mapStateToProps？此外，控件Popover中的mapDispatchToProps看起来很奇怪。我相信您需要修改它以返回像MapStateTops这样的函数。这可能是引发了一个错误，导致状态更新无法传播。调用了MapStateTrops，但我绑定到了错误的对象属性Tanks以获取您的答案和格式反馈。

const-mapDispatchToProps={handleCancel:closePopopOverWithOutsave}

的格式似乎不正确，是的。不过，直到爆米花被打开后，这才被调用。在任何情况下，修复此函数都不能修复问题。Popover组件仍无法渲染。请将代码发布到您的

createModifiers

中。已在上面发布createModifiers。感谢您的回答和对格式的反馈。

const-mapDispatchToProps={handleCancel:closePopopOverWithOutsave}

的格式似乎不正确，是的。不过，直到爆米花被打开后，这才被调用。在任何情况下，修复此函数都不能修复问题。Popover组件仍无法渲染。请将代码发布到您的

createModifiers

中。已在上面发布createModifiers。谢谢