当前位置: 首页 > 知识库问答 >
问题:

在React-Redux连接组件上对道具停止的状态传播的改变

隆飞宇
2023-03-14

状态保存在MyPayments组件中(它是本地状态--尽管您可以看到连接的组件,但我几乎不使用Redux)。

它具有以下结构:

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

payments数组作为道具传递给子组件(连接的clientpayments)-您可以在上面的屏幕截图中看到它。我认为连接的组件将它进一步传递到ClientPayment组件。但是...

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

共有1个答案

金昂熙
2023-03-14

您可以在这里找到一些相关的主题:React:为什么当道具更改时子组件不更新

此外,请尝试打印您在componentShouldUpdate上获得的数据,您可以在这里找到:https://facebook.github.io/react/docs/react-component.html#shouldComponentUpdate

 类似资料:
  • 最后,在中有一个子组件,名为。这就是问题所在。我还将从获得的项传递到。因此,数据流是(连接)>(未连接)>(连接)。 连接到Redux。它使用redux中的一些操作来更新中的项。当我在中更新时,可以很好地接收更新后的数据,但是却什么都接收不到。中的项从未更新。 我发现问题出在将连接到Redux时。如果没有连接到redux,它也会接收更新的道具,就像一样。 组件如下。我已经试着尽可能地简化它们。 D

  • 我正在尝试使用React Redux。我遇到了这样一种情况:一个连接的组件(Coordinates.jsx)嵌套在另一个连接的组件(Canvas.jsx)中。 源代码https://github.com/RinatRezyapov/Vault-13.git(纱线安装,然后纱线开始) 在父组件画布中。jsx I在componentDidMount()中调度一个操作,该操作不可变地更改状态。 帆布js

  • 我有一个React应用程序,其中来自父组件的道具被传递到子组件,然后道具设置子组件的状态。 如何让它更新子组件上的状态? 我的精简代码:

  • 问题内容: 我在我的第一个React Native项目中。我想创建一个仅处理来自api数据同步的HOC。然后,这将包装所有其他组件。 如果我是正确的,我的组件将通过在export语句中执行以下操作来增强所有其他组件: 我苦苦挣扎的概念还取决于React Redux Connect方法来检索其他redux状态。我的问题是如何同时使用两者?像这样吗 我可能在这里完全误解了这个概念,所以我非常感谢一些提

  • 我有一些“ChangeMainItem”操作(在我的例子中,它是由外部系统或可能的组件之一调度的)。此操作(例如)仅更新reducer中状态的一个属性(例如)。 我的组件A和B需要对此状态更改做出反应:显示加载指示器、获取其他数据并显示结果。顺序动作可以通过一些异步动作库来完成,但是我应该把调度异步动作放在哪里呢?显然,我不能在组件A和B的reducer中分派异步操作,我也不想将原始操作更改为异步

  • 我试图理解React的高阶组件结构,但是所有的参考资料都假设您已经理解了在编写:BaseComponent{…this.props}{…this.state}时,spread操作符在高阶组件中的作用。如果组件已经作为道具传入,为什么有必要像这样展开道具?