传递给道具的状态传播的变化停止在react-redux连接的组件上

Question

I have the following hierarchy of components:

The state is kept in MyPayments component (it is local state - even though you can see connected components, I barely use Redux).

It has the following structure:

{
  payments: [
    {
      amount: 400.00,
      status: pending
      //...
    },
    {
      amount: 200.00,
      status: approved
      //...
    }
  ]
}

The payments array is passed to the child component (connected ClientPayments ) as a prop - you can see it on the screenshot above. I believe that the connected component passes it further down to the ClientPayments component. But...

At some point in time, after a successful AJAX request, the status property of one of the payments may change. When it does, I want to change how the payment is rendered inside the ClientPayments component. However, when I inspect the props of the ClientPayments component in React devtools, I can see that the changed payment still has the same status here. The Connect(ClientPayments) component though has its payments prop correctly updated.

MyPayments.js

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { camelCaseKeysDeep } from './Utils'

import ClientPayments from './ClientPayments'

class MyPayments extends Component {
  constructor () {
    super()

    this.state = {
      payments: [],
      isLoading: false,
    }

    this.updatePaymentStatus = this.updatePaymentStatus.bind(this)
  }

  componentDidMount () {
    this.setState({
      isLoading: true,
    })

    axios.get(`/api/users/${this.props.userId}/payments`, {
      params: {
        includes: [
          'bankAccount',
        ],
      },
    }).then(response => {
      const payments = response.data

      const camelCasedPayments = camelCaseKeysDeep(payments)

      this.setState({
        payments: camelCasedPayments,
        isLoading: false,
      })
    }).catch((thrown) => {
      console.log(thrown)
      this.setState({
        isLoading: false,
      })
    })
  }

  updatePaymentStatus(paymentId, newStatus) {
    this.setState((prevState) => {
      let payments = prevState.payments
      const paymentIndex = _.findIndex(payments, (payment) => (payment.id === paymentId))
      payments[paymentIndex].status = newStatus
      return {
        payments: payments
      }
    })
  }

  render () {
    const {payments, isLoading} = this.state
    const userId = this.props.userId
    const expandedId = parseInt(this.props.match.params.id)

    return (
      <div>
        <h2>My payments</h2>
        <div className='panel panel-default'>
          <ClientPayments payments={payments} isLoading={isLoading}
                          expandedId={expandedId} userId={userId} onPaymentStatusChange={this.updatePaymentStatus}/>
        </div>
      </div>
    )
  }
}

const mapStateToProps = state => {
  return {
    userId: state.user.id,
  }
}

export default connect(mapStateToProps)(MyPayments)

ClientPayments.js

import React, { Component } from 'react'
import { Button, Table } from 'react-bootstrap'
import { LinkContainer } from 'react-router-bootstrap'
import { connect } from 'react-redux'

import Loader from './Loader'
import PaymentRow from './PaymentRow'
import withFileUpload from './withFileUpload'
import SingleUploader from './SingleUploader'
import BankAccountTable from './BankAccountTable'
import StatusIndicator from './StatusIndicator'
import PaymentStatusAlert from './PaymentStatusAlert'
class ClientPayments extends Component {
  constructor (props) {
    super(props)

    this.SingleUploaderWithFU = withFileUpload(
      SingleUploader,
      'file',
    )

    this.handleSwiftCopyUploaded = this.handleSwiftCopyUploaded.bind(this)
  }

  handleSwiftCopyUploaded (paymentId) {
    this.props.dispatch({
      type: 'NOTIFY',
      status: 'success',
      message: 'A new SWIFT copy has been uploaded',
    })
    axios.put(`/api/payments/${paymentId}/status`, {
      'status': 'pending',
    }).then(() => {
      this.props.onPaymentStatusChange(paymentId, 'pending')
    })
  }

  render () {
    const {payments, isLoading, expandedId} = this.props

    return (
      <Table responsive striped hover fill>
        <thead>
        <tr>
          <th />
          <th>Created</th>
          <th>Amount</th>
          <th>Bank</th>
          <th>Actions</th>
        </tr>
        </thead>
        {
          payments.map((payment) => {
            const storedSwiftCopy = payment.swiftCopyNameOrig !== null ? {
              name: payment.swiftCopyNameOrig,
              preview: payment.swiftCopyFullPath,
              thumb: payment.swiftCopyThumbPath,
            } : null

            return (
              <PaymentRow key={payment.id} payment={payment}
                          initiallyExpanded={expandedId === payment.id}>
                <div>
                  <StatusIndicator status={payment.status}/>
                  <PaymentStatusAlert status={payment.status} rejectionMsg={payment.rejectionMsg}/>
                  <h4>Bank account details</h4>
                  <BankAccountTable bankAccount={payment.bankAccount}/>
                  <h4>Swift copy upload</h4>
                  <this.SingleUploaderWithFU initFile={storedSwiftCopy}
                                             autoUpload
                                             postUrl={`/api/payments/${payment.id}/swift-copy`}
                                             onFileUploaded={() => this.handleSwiftCopyUploaded(payment.id)}/>
                </div>
              </PaymentRow>
            )
          })
        }
        {
          isLoading ? (
            <tbody>
            <tr>
              <td colSpan={5}>
                <div className='vertical-spacer'>
                  <Loader />
                </div>
              </td>
            </tr>
            </tbody>
          ) : (
            payments.length === 0 && (
              <tbody>
              <tr>
                <td colSpan={5}>
                  <div className='vertical-spacer'>
                    <div>
                      <p className='text-center'>You have no payments yet.</p>
                      <p className='text-center'>
                        <LinkContainer to='/payments/new'>
                          <Button bsStyle='primary'>Receive one</Button>
                        </LinkContainer>
                      </p>
                    </div>
                  </div>
                </td>
              </tr>
              </tbody>
            )
          )
        }
      </Table>
    )
  }
}

export default connect()(ClientPayments)

Why isn't the state change propagated? What can I do to fix it?

Answer 1

You can find some related topic here: React: why child component doesn't update when prop changes

Also, please try to print the data you get on componentShouldUpdate, you can find it here: https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdate