Ich aktualisiere den Redux-Status, indem ich die Aktion von einer Formularkomponente auslöst. Der aktualisierte Status liest aus dem mapStateToProps in derselben Komponente. Jetzt ist meine Frage, wie ich den aktualisierten redux Zustand dem vorhandenen reagierenden Zustand in der Komponente zuordne.Wie kann ich den Redux-Zustand dem Reaction-Zustand zuweisen, während sich der Redux-Zustand in React-Redux ändert?
Vielen Dank im Voraus
Sie könnten componentWillReceiveProps Handler verwenden.
componentWillReceiveProps(nextPropsFromRedux) {
this.setState({ somethingFrom: nextPropsFromRedux.property})
}
Sie können setState Methode der Komponente, verwenden und mit Eigenschaften Objekt, um es passieren, die geändert wurden.
Wenn Sie wirklich das tun wollen, möchten Sie wahrscheinlich Sie die componentWillReceiveProps Komponente Funktion und weisen tatsächlich diese Werte this.setState verwenden.
Aber Sie müssen vorsichtig sein mit zwei Anwendungszuständen. Idealerweise sollte die Komponente nur Requisiten empfangen und sie transformieren oder anzeigen können. Mit anderen Worten, wir sollten vermeiden, eine Komponente mit einem Zustand zu haben.
Werfen Sie einen Blick auf stateless components.
Nach mapStateToProps wird componentWillRecieveProps aufgerufen, wo Sie Ihren neuen Status festlegen.
/**
* Created by consultadd on 22/2/17.
*/
import React, { Component } from 'react'
import Head from 'next/head'
import { Router } from '../../../routes'
import { connect } from 'react-redux'
export class EventOrderContainer extends Component {
constructor (props) {
super(props)
this.state = {
orders: [],
orderpage: 0,
ShowCancel: false,
}
}
componentWillRecieveProps(newProps){
this.setState({
orderpage:newProps.ordersPage})
}
render() {
return (
)
}
}
const mapStateToProps = (state) => {
return {
ordersPage:state.orders.ordersPage
}
return state
}
const mapDispatchToProps = (dispatch) => {
}
export default connect(mapStateToProps, mapDispatchToProps)(EventOrderContainer)<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
Warum wollen Sie das tun? Die Komponenten haben bereits Zugriff auf die aktualisierten Requisiten über 'this.props' – Kannaj
@Kannaj Ja, ich habe ** this.props ** in reagieren, aber ich muss sowohl auf die Reaktion und Redux-Zustand für die gleiche Komponente mit der Bedingung entweder Requisiten zugreifen oder reagieren Zustand ist wahr –