Reagieren: Warum die untergeordnete Komponente nicht aktualisiert wird, wenn sich die Requisite ändert

Warum wird Child im folgenden Pseudocode-Beispiel nicht neu gerendert, wenn der Container foo.bar ändert?

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

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

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

Auch wenn ich forceUpdate()nach dem Ändern des Werts in Container aufrufe, zeigt Child immer noch den alten Wert an.

Aktualisieren Sie das untergeordnete Element so, dass das Attribut 'Schlüssel' dem Namen entspricht. Die Komponente wird jedes Mal neu gerendert, wenn sich der Schlüssel ändert.

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

Weil Kinder nicht erneut rendern, wenn sich die Requisiten des Elternteils ändern, sondern wenn sich der STAAT ändert :)

Was Sie zeigen, ist Folgendes: https://facebook.github.io/react/tips/communicate-between-components.html

Es werden Daten von Eltern zu Kindern über Requisiten weitergegeben, aber es gibt dort keine Renderlogik.

Sie müssen einen Status für das übergeordnete Element festlegen und dann das untergeordnete Element beim Ändern des übergeordneten Status erneut rendern. Das könnte helfen. https://facebook.github.io/react/tips/expose-component-functions.html

Ich hatte das gleiche Problem. Dies ist meine Lösung. Ich bin mir nicht sicher, ob dies die gute Praxis ist. Sagen Sie mir, wenn nicht:

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

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

UPD: Jetzt können Sie dasselbe mit React Hooks tun: (nur wenn die Komponente eine Funktion ist)

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

Laut React-Philosophie kann die Komponente ihre Requisiten nicht ändern. Sie sollten vom Elternteil erhalten und unveränderlich sein. Nur Eltern können die Requisiten ihrer Kinder ändern.

nette Erklärung zu Zustand gegen Requisiten

Lesen Sie auch diesen Thread. Warum kann ich Requisiten in react.js nicht aktualisieren?

Sie sollten die setStateFunktion verwenden. Wenn nicht, speichert state Ihre Änderung nicht, unabhängig davon, wie Sie forceUpdate verwenden.

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>
        }
    }
}

Ihr Code scheint ungültig zu sein. Ich kann diesen Code nicht testen.

Beim Erstellen Reagieren Sie Komponenten aus functionsund useState.

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

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

Dies gilt nicht Arbeit

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

Dies funktioniert (Hinzufügen eines Schlüssels)

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

Bestätigt, das Hinzufügen eines Schlüssels funktioniert. Ich ging die Dokumente durch, um zu verstehen, warum.

React möchte beim Erstellen untergeordneter Komponenten effizient sein. Eine neue Komponente wird nicht gerendert, wenn sie mit einem anderen untergeordneten Element identisch ist, wodurch die Seite schneller geladen wird.

Durch Hinzufügen eines Schlüssels wird die Reaktion zum Rendern einer neuen Komponente erzwungen, wodurch der Status für diese neue Komponente zurückgesetzt wird.

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

Verwenden Sie die Funktion setState. Also könntest du es tun

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

innerhalb der Handle-Event-Methode.

Sobald der Status aktualisiert wurde, werden Änderungen ausgelöst und erneut gerendert.

Sie sollten das untergeordnete Element wahrscheinlich als Funktionskomponente festlegen, wenn es keinen Status beibehält und die Requisiten einfach rendert und dann vom übergeordneten Element aus aufruft. Alternativ dazu können Sie Hooks mit der Funktionskomponente (useState) verwenden, wodurch die zustandslose Komponente erneut gerendert wird.

Sie sollten die Propas auch nicht ändern, da sie unveränderlich sind. Behalten Sie den Status der Komponente bei.

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

Ich hatte das gleiche Problem. Ich hatte eine TooltipKomponente, die eine showTooltipRequisite erhielt, die ich Parentbasierend auf einer ifBedingung für eine ParentKomponente aktualisierte. Sie wurde in der Komponente aktualisiert, aber die TooltipKomponente wurde nicht gerendert.

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

Der Fehler, den ich gemacht habe, ist, showTooltipals vermietet zu deklarieren .

Mir wurde klar, was ich falsch gemacht habe. Ich habe gegen die Prinzipien des Renderns verstoßen. Das Ersetzen durch Hooks hat den Job gemacht.

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

Definieren Sie geänderte Requisiten in mapStateToProps der Verbindungsmethode in der untergeordneten Komponente.

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

export default connect(mapStateToProps)(ChannelItem);

In meinem Fall wird der Kanal von channelList aktualisiert, sodass ich chanelList in mapStateToProps hinzugefügt habe