状态保存在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)
您可以在这里找到一些相关的主题: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操作符在高阶组件中的作用。如果组件已经作为道具传入,为什么有必要像这样展开道具?