javascript - setState 是否可以使用编号键将新条目添加到对象的开头？

Question

我有一个包含数字、文本 和创建时间 的对象。当函数被触发时，我想 setState 将一个新的键值对添加到这个对象的开头:

this.state.object = {
   '0': {
       'number': '6041234567',
       'text': 'hello world',
       'created': 1531748662    
   },
   '1': {
       'number': '4384321234',
       'text': 'second message',
       'created': 15317489823  
   }
}

新条目看起来像这样:

'0': {
    'number': 1234567,
    'text': "this is a new text",
    'created': 1531748892    
}

我想将它添加到对象的开头。

这就是我所拥有的，但它正在创建全新的条目，最重要的问题是它覆盖了第一个条目。

this.setState({
    ...this.state.recentMessages, this.state.recentMessages: 0 {
       'number': 1234567,
       'text': "this is a new text",
       'created': 1531748892  
    },
});

Answer 1

我的理解是，你想在列表的顶部显示新记录。

我创建了一个示例应用程序，它将在顶部添加新项目。
https://codesandbox.io/s/olqmo1z6yq

要点是，记录添加到末尾，但在 render() 中，数据按数组键降序排列，由 Object.entries 检索。

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
  state = { data: [] };
  static number = 1;

  addData = e => {
    const newItem = {
      number: App.number,
      text: `text ${App.number}`,
      created: 15317489825
    };
    App.number++;

    this.setState(prevState => {
      const data = [...prevState.data, newItem];
      return { data };
    });
  };

  render() {
    const { data } = this.state;
    const sortedData = Object.entries(data)
      // sort in descneding order, showing the Latest message first.
      .sort((a, b) => b - a)
      .map(entry => {
        const [key, item] = entry;
        const { text, number, created } = item;

        return (
          <div key={key}>
            <span>{text}</span>
            <div>Number: {number}</div>
            <div>Created: {created}</div>
            <hr />
          </div>
        );
      });

    return (
      <div>
        <button onClick={this.addData}>Add New Data</button>
        {sortedData}
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);