コンポーネントの順番を変更しても再レンダリングが発生しません

Question

私のHerokuアプリケーションがいつ更新されたかを示すシステムを設計しています。私が持っていた問題は、親コンポーネント（Herokus）が注文を決めたことでしたが、最新のものから順番に更新されたときにソートするようにしました。 Herokuコンポーネントの日付を親のHerokusコンポーネントに戻すことで、これを実現できました。ソート順を示すconsole.log(this.state.apps)を追加しようとしましたが、レンダリングされたコンポーネントには反映されません。私の推測では、ビューを更新する理由としてコンポーネントの変更された順序が表示されないという反応がありますが、正直言って私はヒントはありません。どんな助けもありがとうございます。ファイルは以下の通りです。申し訳ありませんが、私のコードは混乱です、私はこの問題を修正しようと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インデックス変数、記録されたリストをオフに基づいているので、同じ順序で同じキーを持っています。したがって、リアクションには違いはありません。

例：

ソートされていないが、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> 
    ); 
    } 
}