Warum erhält meine React-Kindkomponente keine neuen Requisiten?

Question

Ich habe eine React-Komponente, die als sortierbare Tabelle fungiert. Der Tabellenheader und die Tabellenzeilen sind untergeordnete Elemente eines Containers und der Container verarbeitet den Status der Tabelle. Wenn auf eine Kopfzeile geklickt wird, werden die Daten genau wie in this semantic-ui-react example neu angeordnet.

handleSort = (clickedColumn) => { 
const { column, orders, direction } = this.state 

if (column !== clickedColumn) { 
    this.setState({ 
    column: clickedColumn, 
    orders: customSort(orders, clickedColumn), 
    direction: 'ascending', 
    }) 
} else { 
this.setState({ 
    orders: orders.reverse(), 
    direction: direction === 'ascending' ? 'descending' : 'ascending', 
})} 

Das erste Mal, dass ich einen Spaltenkopf klicken, wird der erste Verschluss läuft, und this.setState ändert den Zustand des Behälters, und löst die Kinder neue Requisiten zu empfangen und entsprechend zu aktualisieren. Wenn ich erneut auf die Spaltenüberschrift klicke, um die Reihenfolge der Daten umzukehren, wird der zweite Abschluss ausgeführt und this.setState aktualisiert den Status des Containers. Dementsprechend aktualisiert die untergeordnete Komponente OverviewTableHeader, aber OverviewTableRows nicht.

render() { 
const { designers, orders, column, direction } = this.state 
if (orders === "loading"){ 
    return <Loading /> 
} 
const tableRows = <OverviewTableRows 
        designers={designers} 
        orders={this.state.orders} 
        /> 
debugger 
return (
    <div className="overview"> 
    <Table selectable fixed sortable> 
     <OverviewTableHeader sort={this.handleSort} column={column} direction={direction}/> 
     {tableRows} 
    </Table> 
    </div> 
) 
} 

Here's a video of this in action.

Im Video können Sie OverviewTableRows Trigger componentWillReceiveProps und shouldComponentUpdate das erste Mal sehen setState in der Mutter ausgelöst wird, aber nicht die zweite.

Ich kann alle meinen Code bei Bedarf hinzufügen. Ist das ein Fehler? Jede Hilfe wird sehr geschätzt!

Answer 1

Ich löste dies, indem ich eine Kopie des Arrays machte, bevor ich es umkehrte und es benutzte, um den Zustand zu aktualisieren.

handleSort = (clickedColumn) => { 
const { column, orders, direction } = this.state 

if (column !== clickedColumn) { 
    this.setState({ 
    column: clickedColumn, 
    orders: customSort(orders, clickedColumn), 
    direction: 'ascending', 
    }) 
} else { 
    const reversedOrders = orders.slice().reverse(); 
this.setState({ 
    orders: reversedOrders, 
    direction: direction === 'ascending' ? 'descending' : 'ascending', 
})} 

Ich denke, die Identität des Arrays orders zählte. Ich vermute, das hat mit der funktionalen Natur von React zu tun. Ich hoffe, das hilft jemandem! Wenn jemand eine gute Erklärung dafür hat, warum dies der Fall ist, würde ich es gerne hören.

Answer 2

Hier ist ein gutes Zitat, das erklären kann, was vor sich geht.

Durch das direkte Manipulieren von this.state umgehen Sie die Statusverwaltung von React, was potentiell gefährlich sein kann, da der Aufruf von setState() anschließend die von Ihnen vorgenommene Mutation ersetzen kann.

Aufgenommen von this article.

Da orders ist ein veränderliches Objekt und ein Mitglied der state, können Sie den Zustand direkt sind zu ändern, wenn Sie orders.reverse nennen (auch wenn diese Neuanordnung innerhalb eines setState Anruf getan wird).

Also, ja, Ihre Lösung zum Erstellen einer Kopie von orders wird dieses Problem lösen, weil Sie this.state nicht mehr direkt ändern.