时间戳

首页 > 解决方案 > 反应将空对象添加到状态中的对象数组

reactjs - 反应将空对象添加到状态中的对象数组

问题描述

我有一个状态：

this.state = {
    rowData
}

rowData = [
    {MEMBER: "DATA1", ALIS: "DATA2", STATUS: "DATA3"},
    {MEMBER: "DATA1", ALIS: "DATA2", STATUS: "DATA3"},
    {MEMBER: "DATA1", ALIS: "DATA2", STATUS: "DATA3"}
]

单击按钮时，我希望能够像这样添加一个空对象。

   rowData = [
        {MEMBER: "", ALIS: "", STATUS: ""},   //CLICK 1
        {MEMBER: "", ALIS: "", STATUS: ""},   // CLICK 2 and so on
        {MEMBER: "DATA1", ALIS: "DATA2", STATUS: "DATA3"},
        {MEMBER: "DATA1", ALIS: "DATA2", STATUS: "DATA3"},
        {MEMBER: "DATA1", ALIS: "DATA2", STATUS: "DATA3"}
    ]

如何更新状态以在按钮单击时包含空字符串。

标签： reactjs

解决方案

您可以使用扩展运算符：

this.setState({
  rowData: [
    { MEMBER: "", ALIS: "", STATUS: "" },
    ...this.state.rowData
  ]
})

例如：

const rowData = [
  { MEMBER: "DATA1", ALIS: "DATA2", STATUS: "DATA3" },
  { MEMBER: "DATA1", ALIS: "DATA2", STATUS: "DATA3" },
  { MEMBER: "DATA1", ALIS: "DATA2", STATUS: "DATA3" }
];

class MyComponent extends React.Component {
  state = {
    rowData
  };

  handleClick = () => {
    this.setState({
      rowData: [
        { MEMBER: "", ALIS: "", STATUS: "" },
        ...this.state.rowData
      ]
    });
  };

  render() {
    return (
      <>
        <button onClick={this.handleClick}>Button</button>
        {this.state.rowData.map(({ MEMBER, ALIS, STATUS }, i) => (
          <p key={i}>
            Member: {MEMBER}, Alis: {ALIS}, Status: {STATUS}
          </p>
        ))}
      </>
    );
  }
}

推荐阅读