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

Question

我有一个包含number,text和时间的对象created。当函数被触发时，我想在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  
    },
});

标签： javascriptreactjs

Answer 1

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

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

Gist is that, records are added to the end, but in render(), data is sorted in descending order by array key, which is retrieved by 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);