React 更改組件順序不會觸發重新渲染

Question

我正在設計一個顯示 Heroku 應用程序更新時間的系統。 我遇到的問題是父組件 ( Herokus ) 決定了順序，但我希望它們根據從最新開始更新的時間進行排序。 通過將來自Heroku組件的日期傳遞回父Herokus組件，我能夠實現這一點。 我嘗試添加一個顯示排序順序的console.log(this.state.apps) ，但這並未反映在呈現的組件中。 我的猜測是 react 沒有將組件的更改順序視為更新視圖的原因 - 但老實說我不知道​​。 任何幫助表示贊賞。 文件如下。 抱歉，我的代碼一團糟，為了解決這個問題，我重寫了 3 次。

Herokus 組件：

import React from 'react';
import Heroku from './Heroku';

export default class Herokus extends React.Component {
  constructor(props) {
    super(props);

    var apps = [
      'example-heroku-app'
    ]

    this.state = {
      apps: apps.map((h) => {
        return {
          app: h,
          updatedAt: new Date()
        };
      })
    }
  }

  sortApps() {
    var sorted = this.state.apps.sort((a, b) => {
      return a.updatedAt < b.updatedAt;
    });
    this.setState({
      apps: sorted
    });
  }

  updateParrent(data){
    var apps = this.state.apps;
    apps.find(x => x.app === data.app).updatedAt = data.updatedAt;
    this.setState({
      apps: apps
    });
    this.sortApps();
    this.forceUpdate();
  }

  render() {
    var s = this;

    return (
      <div>
        {s.state.apps.map((app, i) => {
          return (
            <Heroku app={app.app} compact key={`heroku-${i}`} updateParrent={s.updateParrent.bind(s)}/>
          );
        })}
      </div>
    );
  }
}

Heroku 組件：

import React from 'react';

export default class Ping extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        app: props.app,
      updatedAt: new Date()
    };
  }

  componentDidMount() {
    var s = this;
    axios.get(`/api/heroku/app/${s.props.app}`, {
        timeout: 20000,
    })
    .then(res => {
        var data = res.data;
      s.setState({
        app: data.app.name,
        updatedAt: new Date(data.app['updated_at'])
      });
      s.props.updateParrent(s.state);

      setInterval(() => {
        var updatedAt = new Date(s.state.updatedAt);
        s.setState({
          updatedAt: updatedAt
        });
      }, 1000);
    });
  }

  howLongAgo(date) {
    var ms = new Date() - date;
    var seconds = ms / 1000;
    var n = seconds;
    var suffix = '';

    // less than 1 minute
    if(seconds < 60){
      n = seconds;
      suffix = 'second' + (n > 1.5 ? 's' : '');
    }
    // less than 1 hour
    else if(seconds < 3600) {
      n = seconds / 60
      suffix = 'minute' + (n > 1.5 ? 's' : '');
    }
    // less than 1 day
    else if(seconds < 86400) {
      n = seconds / 3600;
      suffix = 'hour' + (n > 1.5 ? 's' : '');
    }
    // less than 1 week
    else if(seconds < 604800) {
      n = seconds / 86400;
      suffix = 'day' + (n > 1.5 ? 's' : '');
    }
    // more than 1 week
    else {
      n = seconds / 604800;
      suffix = 'week' + (n > 1.5 ? 's' : '');
    }

    return `${Math.round(n)} ${suffix} ago`;
  }

  render() {
    var s = this.state;
    var self = this;
    var output;

    // COMPACT VIEW
    if(this.props.compact){
      output = (
        <div className={'heroku heroku-compact'}>
            <h3>{s.app}</h3>
            <p>{self.howLongAgo(s.updatedAt)}</p>
            <div className='clearfix'></div>
        </div>
      )

    // FULL SIZE VIEW
    } else{
      output = ()
    }

    return output;
  }
}

Answer 1

問題似乎是順序發生了變化，但是由於鍵基於i索引變量，因此記錄的列表仍然具有相同順序的相同鍵。 因此，React 沒有看到任何區別。

例子：

未分類的應用程序 a、b 和 c

<div key="1"> //app b
<div key="2"> //app a
<div key="3"> //app c

排序的應用程序

<div key="1"> //app a
<div key="2"> //app b
<div key="3"> //app c

這些應用程序現在按正確的順序排列，但父組件 Herokus 仍然以相同的順序使用鍵 1、2 和 3。

解決方案：將密鑰更改為單個 Heroku 組件獨有的內容，但與updatedAt不同的是，該內容將保持不變。 在這種情況下，最合乎邏輯的選擇是應用程序名稱。

這可以在 Herokus 組件的渲染函數中實現，如下所示：

export default class Herokus extends React.Component {
  render() {
    var s = this;

    return (
      <div>
        {s.state.apps.map((app, i) => {
          return (
            <Heroku app={app.app} compact key={`heroku-${app.app}`} updateParrent={s.updateParrent.bind(s)}/>
          );
        })}
      </div>
    );
  }
}