Javascript 是否可以通过设置state将新条目添加到带有编号键的对象的开头？

我有一个对象，它包含一个

数字

，

文本

，以及创建它的时间。当函数被触发时，我想

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    
}

我想把它添加到对象的开头

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

---

我的理解是，你想在榜首显示新记录

我创建了一个示例应用程序，它将在顶部添加新项目。

要点是，记录被添加到末尾，但在

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

从“React”导入React；
从“react dom”导入react dom；
类应用程序扩展了React.Component{
状态={data:[]}；
静态数=1；
addData=e=>{
常量newItem={
编号：App.number，
text:`text${App.number}`，
创建日期：15317489825
};
App.number++；
this.setState（prevState=>{
const data=[…prevState.data，newItem]；
返回{data}；
});
};
render（）{
const{data}=this.state；
const sortedData=对象项（数据）
//按描述顺序排序，首先显示最新消息。
.sort（（a，b）=>b-a）
.map（条目=>{
常量[键，项]=条目；
常量{text，number，created}=item；
返回(
{text}
编号：{Number}
已创建：{Created}

);
});
返回(
添加新数据
{sortedData}
);
}
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

对象没有“开始”。如果要通过某种排序键（如索引号）强制排序，请使用数组。对象中没有真正的顺序。请考虑使用数组，这样您就可以很容易地添加新的代码：<代码>此。SETATE（{ReutsMeime:[ NeMeMead，….St.ReuttMeMe] }）；

还有一个给定的属性名（如果我没有读错的话，在本例中，如
“0”
）只能在一个对象中出现一次。您可以使用
Array.from（object）
，但我建议只从start@Sam好吧在将API响应转换为状态之前，考虑将API响应转换为数组，如果这样可以使您的生命变得更容易。code>vararr=Object.keys（obj.map）（k=>parseInt（k，10））.sort（）.map（k=>obj[k]）
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);