Reagire: perché il componente figlio non si aggiorna quando cambia l'elica

Perché nel seguente esempio di pseudo-codice Child non esegue il rendering di nuovo quando Container cambia foo.bar?

Container {
  handleEvent() {
    this.props.foo.bar = 123
  },

  render() {
    return <Child bar={this.props.foo.bar} />
}

Child {
  render() {
    return <div>{this.props.bar}</div>
  }
}

Anche se chiamo forceUpdate()dopo aver modificato il valore in Contenitore, Child mostra comunque il vecchio valore.

Aggiorna figlio per avere l'attributo 'chiave' uguale al nome. Il componente eseguirà nuovamente il rendering ogni volta che la chiave cambia.

Child {
  render() {
    return <div key={this.props.bar}>{this.props.bar}</div>
  }
}

Perché i bambini non si renderanno se cambiano gli oggetti di scena del genitore, ma se il suo STATO cambia :)

Quello che stai mostrando è questo: https://facebook.github.io/react/tips/communicate-between-components.html

Passerà i dati da genitore a figlio attraverso oggetti di scena, ma non esiste alcuna logica di rendering.

È necessario impostare uno stato sul genitore, quindi eseguire nuovamente il rendering del figlio sullo stato di modifica del genitore. Questo potrebbe aiutare. https://facebook.github.io/react/tips/expose-component-functions.html

Ho avuto lo stesso problema. Questa è la mia soluzione, non sono sicuro che sia la buona pratica, dimmi in caso contrario:

state = {
  value: this.props.value
};

componentDidUpdate(prevProps) {
  if(prevProps.value !== this.props.value) {
    this.setState({value: this.props.value});
  }
}

UPD: Ora puoi fare la stessa cosa usando React Hooks: (solo se il componente è una funzione)

const [value, setValue] = useState(propName);
// This will launch only if propName value has chaged.
useEffect(() => { setValue(propName) }, [propName]);

Secondo la filosofia di React, il componente non può cambiare i suoi oggetti di scena. dovrebbero essere ricevuti dal genitore e dovrebbero essere immutabili. Solo un genitore può cambiare gli oggetti di scena dei suoi figli.

bella spiegazione su stato vs oggetti di scena

leggi anche questa discussione Perché non riesco ad aggiornare gli oggetti di scena in React.js?

Dovresti usare la setStatefunzione. Altrimenti, state non salverà le modifiche, indipendentemente da come usi forceUpdate.

Container {
    handleEvent= () => { // use arrow function
        //this.props.foo.bar = 123
        //You should use setState to set value like this:
        this.setState({foo: {bar: 123}});
    };

    render() {
        return <Child bar={this.state.foo.bar} />
    }
    Child {
        render() {
            return <div>{this.props.bar}</div>
        }
    }
}

Il tuo codice non sembra valido. Non riesco a testare questo codice.

Quando si creano componenti React da functionse useState.

const [drawerState, setDrawerState] = useState(false);

const toggleDrawer = () => {
      // attempting to trigger re-render
      setDrawerState(!drawerState);
};

Questo non funziona

         <Drawer
            drawerState={drawerState}
            toggleDrawer={toggleDrawer}
         />

Questo funziona (aggiunta chiave)

         <Drawer
            drawerState={drawerState}
            key={drawerState}
            toggleDrawer={toggleDrawer}
         />

Confermato, l'aggiunta di una chiave funziona. Ho esaminato i documenti per cercare di capire il perché.

React vuole essere efficiente durante la creazione di componenti figlio. Non renderà un nuovo componente se è uguale a un altro figlio, il che rende il caricamento della pagina più veloce.

L'aggiunta di una chiave costringe React a renderizzare un nuovo componente, ripristinando così lo stato per quel nuovo componente.

https://reactjs.org/docs/reconciliation.html#recursing-on-children

Utilizzare la funzione setState. Quindi potresti farlo

       this.setState({this.state.foo.bar:123}) 

all'interno del metodo dell'evento handle.

Una volta, lo stato viene aggiornato, attiverà le modifiche e verrà eseguito nuovamente il rendering.

Probabilmente dovresti rendere Child come componente funzionale se non mantiene alcuno stato e semplicemente esegue il rendering degli oggetti di scena e quindi lo chiama dal genitore. In alternativa a ciò è possibile utilizzare gli hook con il componente funzionale (useState) che provocherà il rendering del componente senza stato.

Inoltre, non dovresti alterare i Propa in quanto sono immutabili. Mantiene lo stato del componente.

Child = ({bar}) => (bar);

Stavo riscontrando lo stesso problema. Avevo un Tooltipcomponente che riceveva showTooltipprop, che stavo aggiornando sul Parentcomponente in base a una ifcondizione, che veniva aggiornato nel Parentcomponente ma che il Tooltipcomponente non stava eseguendo il rendering.

const Parent = () => {
   let showTooltip = false;
   if(....){ showTooltip = true; }
   return(
      <Tooltip showTooltip={showTooltip}></Tooltip>
   )
}

L'errore che stavo facendo è dichiarare showTooltipun permesso.

Mi sono reso conto che cosa stavo facendo di sbagliato stavo violando i principi di come funziona il rendering, sostituendolo con ganci ha fatto il lavoro.

const [showTooltip, setShowTooltip] =  React.useState<boolean>(false);

definire oggetti di scena modificati in mapStateToProps del metodo connect nel componente figlio.

function mapStateToProps(state) {
  return {
    chanelList: state.messaging.chanelList,
  };
}

export default connect(mapStateToProps)(ChannelItem);

Nel mio caso, il canale di channelList viene aggiornato, quindi ho aggiunto chanelList in mapStateToProps

export default function DataTable({ col, row }) {
  const [datatable, setDatatable] = React.useState({});
  useEffect(() => {
    setDatatable({
      columns: col,
      rows: row,
    });
  /// do any thing else 
  }, [row]);

  return (
    <MDBDataTableV5
      hover
      entriesOptions={[5, 20, 25]}
      entries={5}
      pagesAmount={4}
      data={datatable}
    />
  );
}

questo esempio usa useEffectper cambiare stato quando propscambia.