Come forzare il rimontaggio sui componenti React?

Diciamo che ho un componente di visualizzazione che ha un rendering condizionale:

render(){
    if (this.state.employed) {
        return (
            <div>
                <MyInput ref="job-title" name="job-title" />
            </div>
        );
    } else {
        return (
            <div>
                <MyInput ref="unemployment-reason" name="unemployment-reason" />
                <MyInput ref="unemployment-duration" name="unemployment-duration" />
            </div>
        );
    }
}

MyInput ha un aspetto simile a questo:

class MyInput extends React.Component {

    ...

    render(){
        return (
            <div>
                <input name={this.props.name} 
                    ref="input" 
                    type="text" 
                    value={this.props.value || null}
                    onBlur={this.handleBlur.bind(this)}
                    onChange={this.handleTyping.bind(this)} />
            </div>
        );
    }
}

Diciamo che employedè vero. Ogni volta che lo cambio su false e l'altra vista esegue il rendering, solo unemployment-durationviene reinizializzato. Inoltre unemployment-reasonviene precompilato con il valore da job-title(se è stato fornito un valore prima della modifica della condizione).

Se cambio il markup nella seconda routine di rendering in qualcosa di simile:

render(){
    if (this.state.employed) {
        return (
            <div>
                <MyInput ref="job-title" name="job-title" />
            </div>
        );
    } else {
        return (
            <div>
                <span>Diff me!</span>
                <MyInput ref="unemployment-reason" name="unemployment-reason" />
                <MyInput ref="unemployment-duration" name="unemployment-duration" />
            </div>
        );
    }
}

Sembra che tutto funzioni bene. Sembra che React non riesca a distinguere tra "titolo professionale" e "motivo della disoccupazione".

Per favore dimmi cosa sto sbagliando ...

Quello che probabilmente sta accadendo è che React pensa che solo una MyInput( unemployment-duration) viene aggiunta tra i rendering. In quanto tale, job-titlenon viene mai sostituito con unemployment-reason, motivo per cui i valori predefiniti vengono scambiati.

Quando React fa il diff, determinerà quali componenti sono nuovi e quali sono vecchi in base alla loro keyproprietà. Se nel codice non viene fornita alcuna chiave di questo tipo, ne genererà una propria.

Il motivo per cui l'ultimo frammento di codice che fornisci funziona è perché React ha essenzialmente bisogno di cambiare la gerarchia di tutti gli elementi sotto il genitore dive credo che ciò attiverebbe un nuovo rendering di tutti i figli (motivo per cui funziona). Se avessi aggiunto il spanin fondo invece che in alto, la gerarchia degli elementi precedenti non cambierebbe, e quegli elementi non sarebbero stati riprodotti nuovamente (e il problema persisteva).

Ecco cosa dice la documentazione ufficiale di React :

La situazione diventa più complicata quando i bambini vengono mescolati (come nei risultati di ricerca) o se nuovi componenti vengono aggiunti all'inizio dell'elenco (come negli stream). In questi casi in cui l'identità e lo stato di ogni figlio devono essere mantenuti attraverso i passaggi di rendering, è possibile identificare in modo univoco ogni figlio assegnandogli una chiave.

Quando React riconcilia i figli con chiave, assicurerà che ogni figlio con chiave verrà riordinato (invece di essere distrutto) o distrutto (invece di riutilizzato).

Dovresti essere in grado di risolvere questo problema fornendo keytu stesso un elemento unico al genitore divoa tutti gli MyInputelementi.

Per esempio:

render(){
    if (this.state.employed) {
        return (
            <div key="employed">
                <MyInput ref="job-title" name="job-title" />
            </div>
        );
    } else {
        return (
            <div key="notEmployed">
                <MyInput ref="unemployment-reason" name="unemployment-reason" />
                <MyInput ref="unemployment-duration" name="unemployment-duration" />
            </div>
        );
    }
}

O

render(){
    if (this.state.employed) {
        return (
            <div>
                <MyInput key="title" ref="job-title" name="job-title" />
            </div>
        );
    } else {
        return (
            <div>
                <MyInput key="reason" ref="unemployment-reason" name="unemployment-reason" />
                <MyInput key="duration" ref="unemployment-duration" name="unemployment-duration" />
            </div>
        );
    }
}

Ora, quando React esegue il diff, vedrà che divssono diversi e lo riprodurrà di nuovo includendo tutti i suoi figli (1 ° esempio). Nel 2 ° esempio, il diff avrà successo job-titlee unemployment-reasonpoiché ora hanno chiavi diverse.

Ovviamente puoi usare tutte le chiavi che desideri, purché siano uniche.

Aggiornamento agosto 2017

Per una migliore comprensione di come funzionano le chiavi in ​​React, consiglio vivamente di leggere la mia risposta a Comprendere le chiavi univoche in React.js .

Aggiornamento novembre 2017

Questo aggiornamento avrebbe dovuto essere pubblicato qualche tempo fa, ma l'uso di stringhe letterali in refè ora deprecato. Ad esempio ref="job-title"ora dovrebbe invece essere ref={(el) => this.jobTitleRef = el}(per esempio). Vedi la mia risposta all'avviso di ritiro utilizzando this.refs per maggiori informazioni.

Cambia la chiave del componente.

<Component key="1" />

<Component key="2" />

Component verrà smontato e verrà montata una nuova istanza di Component poiché la chiave è stata modificata.

modifica : Documentato su di te probabilmente non è necessario uno stato derivato :

Quando una chiave cambia, React creerà una nuova istanza del componente invece di aggiornare quella corrente. Le chiavi vengono solitamente utilizzate per elenchi dinamici, ma sono utili anche qui.

Usa setStatenella tua vista per cambiare la employedproprietà dello stato. Questo è un esempio del motore di rendering React.

 someFunctionWhichChangeParamEmployed(isEmployed) {
      this.setState({
          employed: isEmployed
      });
 }

 getInitialState() {
      return {
          employed: true
      }
 },

 render(){
    if (this.state.employed) {
        return (
            <div>
                <MyInput ref="job-title" name="job-title" />
            </div>
        );
    } else {
        return (
            <div>
                <span>Diff me!</span>
                <MyInput ref="unemployment-reason" name="unemployment-reason" />
                <MyInput ref="unemployment-duration" name="unemployment-duration" />
            </div>
        );
    }
}

Sto lavorando a Crud per la mia app. Ecco come l'ho fatto Got Reactstrap come mia dipendenza.

import React, { useState, setState } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import firebase from 'firebase';
// import { LifeCrud } from '../CRUD/Crud';
import { Row, Card, Col, Button } from 'reactstrap';
import InsuranceActionInput from '../CRUD/InsuranceActionInput';

const LifeActionCreate = () => {
  let [newLifeActionLabel, setNewLifeActionLabel] = React.useState();

  const onCreate = e => {
    const db = firebase.firestore();

    db.collection('actions').add({
      label: newLifeActionLabel
    });
    alert('New Life Insurance Added');
    setNewLifeActionLabel('');
  };

  return (
    <Card style={{ padding: '15px' }}>
      <form onSubmit={onCreate}>
        <label>Name</label>
        <input
          value={newLifeActionLabel}
          onChange={e => {
            setNewLifeActionLabel(e.target.value);
          }}
          placeholder={'Name'}
        />

        <Button onClick={onCreate}>Create</Button>
      </form>
    </Card>
  );
};

Alcuni React Hooks lì dentro