Question

我正在设计一个系统，显示我的Heroku应用程序何时更新。我遇到的问题是父组件（Herokus）决定了订单，但我希望它们根据从最新版本开始更新的时间进行排序。通过将Heroku组件中的日期传递回父Herokus组件，我能够实现此目的。我尝试添加一个显示排序顺序的console.log(this.state.apps)，但这不会被渲染的组件反映出来。我的猜测是反应是没有看到组件的更改顺序作为更新视图的原因 - 但说实话我不知道。任何帮助表示赞赏。文件如下。对不起，我的代码很乱，我重写了三次试图解决这个问题。

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

反应组件的更改顺序不会触发重新渲染

1 个答案: