React: übergeben Wert von übergeordnet nach Kind funktioniert nicht

Question

Ich muss einen Wert übergeben index von Eltern zu Kind. Sowohl Eltern als auch Kind benötigen eine Funktion zum Überarbeiten index. Wenn Eltern index überarbeiten, kann Kind das Update nicht erhalten. Kann ich etwas reparieren?

Elternklasse:

constructor(props) { 
    super(props); 
    this.state = { 
     index: 0 
    } 
} 
     parentFunction(dir) { 
      this.setState({ 
       index: 10 
      }); 
     } 
    render() { 
     return(
     <Child index={this.state.index}/> 
    );} 

Child:

constructor(props) { 
     super(props); 
     this.state = { 
      index: this.props.index 
     }; 
    } 
childFunction(dir) { 
    this.setState({ 
     index: this.props.index+1  
    }); 
} 
render() { 
    return(
    <div>{this.state.index}</div> 
);} 

Answer 1

Sie müssen die Aktualisierungsfunktion nicht in beiden Klassen beibehalten. Sie können die Aktualisierungsfunktion von Parent Down an Child übergeben und die Statusaktualisierungen von den Eltern verarbeiten lassen. Auch das Setzen eines Zustands, der auf Requisiten im Konstruktor basiert, ist ein Anti-Pattern. Sie sollten die Prop in Kind direkt für Ihren Anwendungsfall verwenden. Im Fall, dass Sie das Kind Zustand zu aktualisieren, von Requisiten dafür sorgen, dass in den componentWillReceiveProps auch zu tun, da die constructor nur das erste Mal und die componentWillReceiveProps auf allen Eltern genannt, was Sie wieder machen

componentWillReceiveProps(newProps) { 
     if (newProps.index!== this.props.index) { 
      this.setState({ 
       index:newProps.index 
      }) 
     } 
    } 

jedoch Notwendigkeit ist

Elternklasse:

constructor(props) { 
    super(props); 
    this.state = { 
     index: 0 
    } 
} 
     parentFunction(dir) { 
      this.setState({ 
       index: 10 
      }); 
     } 
    updaterFunction(dir) { 
     this.setState((prevState) => ({ 
      index: prevState.index+1  
     })); 
    } 
    render() { 
     return(
     <Child updaterFunction={(val) => this.updaterFunction(val)} index={this.state.index}/> 
    );} 

Child:

updateProps =() => { 
    this.props.updaterFunction(); 
} 
render() { 
    return(
    <div>{this.props.index}</div> 
);} 

Answer 2

Wenn Sie den Artikel über den Lebenszyklus reagieren react life cycle dann lesen u verstehen, warum Sie den Wert aus dem übergeordneten an die Kinder weitergeben , aber Sie haben nicht gesagt, dass die Reaktion sollte aktualisiert werden, fügen Sie den Code wie Beblow:

//add this life cycle in the child component 
 

 
    componentWillReceiveProps(newProps) { 
 
     if (newProps.index!== this.props.index) { 
 
      this.setState({ 
 
       index:newProps.index 
 
      }) 
 
     } 
 
    }

Answer 3

Sie haben (mindestens) 2 Optionen.

1. Der beste Weg, dies zu tun, ist die übergeordnete Funktion zu übergeben, die über Requisiten den Index für das Kind ändert. Dann können Sie diese Funktion in der Kindklasse aufrufen und es wird den Elternstatus ändern. Verwenden Sie in der render Methode der Kindklasse einfach den Index von Requis statt lokalen Zustand des Kindes.

2. Die schlechte Art und Weise, dies zu tun in der Render-Methode des Kindes wäre hat einen Gesprächszustand zu setzen, die in Requisiten bestand Zustand Index gleich den Wert legt.