Wie update-Komponente Staat auf redux Zustand zu ändern?

Da habe ich eine Komponente mit Formen, ich brauche die Formen angeschlossen werden, um den Komponentenstatus. Die ersten Daten stammen von Redux also versuchen zu initialisieren und aktualisieren Sie die Komponente, indem Sie die Einstellung zum Staat mit den Requisiten:

componentWillMount = () => {
  this.setState({
    language: this.props.language || 'en'
  })
}

language ist eine verbundene requisite und ich überprüft, dass es aktualisiert wird, in den laden.

const mapStateToProps = state => ({
  language: state.language
})

Ich habe auch versucht zu verwenden componentWillReceiveProps und componentWillUpdate aber es funktioniert nicht. Ich bekomme den Ausgangszustand, und sogar obwohl der Speicher und die angeschlossenen Requisiten ändern, wird die Komponente Status nicht aktualisieren.

{this.props.language} //updates
{this.state.language} //doesn't change

Was ist der richtige Weg, um Formulare verwalten von Redux Daten?

Den render Teil:

render () {
  const {classes, theme, web} = this.props

  const language = (
    <CardContent>
      <Typography type="headline">
        Language
      </Typography>
      <Divider/>
      <form className={classes.container} autoComplete="off">
        <FormControl fullWidth margin="normal">
          <InputLabel htmlFor="language">Select Block</InputLabel>
          <Select
            value={this.state.language} //<==================== language
            onChange={this.handleLanguaheChange}
            input={<Input id="language"/>}
          >
            <MenuItem value={'en'}>English</MenuItem>
            <MenuItem value={'he'}>עברית</MenuItem>
          </Select>
        </FormControl>
      </form>
    </CardContent>
  )
  ...

  return (
      <Grid
        container
        spacing={theme.spacing.unit * 3}
        justify={'space-between'}
        className={classes.gridWrap}
      >
        <Grid item xs={6}>
          <Card className={classes.card}>
            {language}
          </Card>
...
sind Sie einstellungsmodus in componentWillReceiveProps. Auch ruft setState synchron in componentWillMount nicht ausgelöst extra-rendering
Ich habe versucht componentWillMount , componentWillUpdate und componentWillReceiveProps aber keiner von Ihnen arbeitete
Kannst du den relevanten code Ihrer componentWillReceiveProps
es ist der exakt gleiche code wie die, die ich eingefügt mit componentWillMount

InformationsquelleAutor ilyo | 2017-12-07

  1. 1

    obwohl der Shop und die angeschlossenen Requisiten ändern, wird die Komponente Status nicht aktualisieren

    Den Weg, Sie haben es geschrieben, der Status wird nicht aktualisiert, sofern Sie nicht explizit aktualisieren mittels setState() (wahrscheinlich in der componentWillReceiveProps() - Methode).

    Wenn Sie mapStateToProps() mit der Redux connect() - HOC, die Sie zur Abbildung Ihrer Redux Zustand der Komponente durch seine Requisiten, also in deinem Fall this.props.language aktualisiert wird, wenn die Redux gespeicherten updates.

    Ja, so dachte ich, dass, sobald die Requisiten aktualisieren, wird es auslösen componentWillReceiveProps und damit update der Staat. Bin ich falsch?
    Sorry, was ist der Zweck der Komponente ist state (aktualisiert mit this.setState), wenn react-redux Karten die Redux - state zu den props und nicht an der Komponente state? Wann verwenden wir Komponente state dann?
    Ich glaube, die Sie verwenden möchten Requisiten zum ändern des Status extern, und der Staat ändert sich der Zustand intern (in Bezug auf die Komponente).
    Wie ändern etwas, das bezieht sich ausschließlich auf die Komponente und nicht die ganze Anwendung.

    InformationsquelleAutor T Porter

  2. 1

    Ersten, Sie sind mit einem Pfeil-Funktion für componentWillMount. Faustregel ist, verwenden Sie keine Pfeil-Funktionen für life-cycle-Haken(componentWillMount, shouldComponentUpdate, ...etc). Es ist üblich, setState in componentWillMount Haken. Aber nie Stand in componentDidMount.
    bitte versuchen Sie es erneut es schreiben wie, 

    constructor(props) {
 super(props)
 this.state = {
  language: 'en',
 }
}
componentWillMount() {
 const { language } = this.props
 if (language) this.setState(prevState => ({ language: prevState.language = language }))
}

    in einigen Ausnahmefällen, wie ich schrieb, zwei Klassen in einem einzigen .js-Datei(wie gesagt, einige Ausnahmen) und ich konnte nicht in der Lage sein, um es zu ändern aus componentWillMount wie erwartet(später festgestellt, die Requisiten sind, geändert durch die Kind-Klasse).
    in solchen Fällen können Sie überschreiben es im render -

    render() {
 const { language } = this.props
 if (language) this.setState(prevState => ({ language: prevState.language = language }))

    InformationsquelleAutor user3065781

  3. 0

    componentWillReceiveProps wird nur aufgerufen werden, wenn die Komponente neu gerendert.

    Zunächst als erste Komponente die Zeit der Montage, der es nicht ausgelöst.

    Kann man das nicht nennen setState innen componentwillupdate.

    Damit zur Initialisierung der Anfangszustand der Komponente von redux speichern,sollten Sie constructor.

        constructor(props) {

    super(props);

    this.state = {
        language: this.props.language || 'en'
     }
   }
    Danke, was ist der Unterschied zwischen der Verwendung constructor und componentwillMount/reciveProps in diesem Fall?
    finden Sie hier reactjs.org/docs/react-component.html
    Ich habe versucht, Ihre Lösung, aber das Ergebnis ist das gleiche
    Bitte teilen Sie Ihre render-Teil, wo Sie es verwenden
    Ich aktualisierte die Frage mit dem Rendern

    InformationsquelleAutor RIYAJ KHAN

  4. 0

    Nicht sicher, ob das gilt, aber ich lief in ein ähnliches problem vor kurzem, und mein Fall wurde aufgrund der Tatsache, dass der Aufruf dieser.setState ist keine Garantie für eine sofortige update zum Staat; es sagt nur, daß der Zustandswechsel erfolgt schließlich.

    Vom reagieren-Komponenten-Dokumentation:

    Denken setState() als Anfrage sondern als ein unmittelbarer Befehl
    die Komponente aktualisieren. Für eine besser wahrgenommene Leistung, Reagieren kann
    es zu verzögern, und dann aktualisieren Sie mehrere Komponenten in einem Arbeitsgang. Reagieren
    garantiert nicht, dass der Staat änderungen werden sofort angewendet.

    setState() nicht immer sofort aktualisieren der Komponente. Es kann
    batch-oder zurückgestellt wird das update erst später. Dies macht das Lesen dieses.Zustand
    direkt nach dem Aufruf von " setState() eine potentielle Gefahr. Verwenden Sie stattdessen
    componentDidUpdate oder eine setState-callback (setState(updater,
    callback -)), entweder von denen sind garantiert, um das Feuer nach dem update
    angewendet wurde. Wenn Sie benötigen, um den Staat auf der Grundlage der bisherigen
    Staat, Lesen Sie über die updater-argument unten.

    Wenn Sie brauchen, um einige "instant" änderungen der staatlichen oder Dinge, die davon abhängen, Staat, dann der Rückruf auf setState (), die Sie verwenden können, zu sperren, die Dinge an Ort und Stelle. Der Rückruf ist was für mich gearbeitet.

    InformationsquelleAutor JESii

Schreibe einen Kommentar