Javascript React-追加而不是替换状态

编辑-我现在得到TypeError:this.state.historyIn.map不是下面代码中的函数

我想知道是否有人能帮忙。我向自己提出了挑战，要创建一个登录应用程序来教会自己如何应对

我正在寻找一种方法，在每次触发登录或注销事件时附加“In”和“Out”历史记录。每次点击按钮时，我都会更换状态，但现在我有点卡住了

我的想法是创建一个数组或对象，并在每次单击按钮时附加到该数组或对象上&然后通过映射显示该数组或对象，但我不确定如何为每个人处理该数组或对象

我希望这是有道理的

如果您需要检查任何其他组件，则完整项目位于此处-

import React，{Component}来自“React”；
从“react bootstrap”导入{按钮，折叠}；
导入“bootstrap/dist/css/bootstrap.min.css”；
导入“./style/row.css”；
类行扩展组件{
构造函数（）{
超级（）；
此.state={
登录：“登录”，
注销：“注销”，
D：错，
是的，
网上：“，
离线：“，
开：错，
组织蛋白：[]，
历史资料：[]
};
}
签名（）{
让今天=新日期（）；
让时间=
today.getHours（）+“：“+today.getMinutes（）；
this.setState（{signIn:time，historyIn:time}）；
此.state.historyIn.push（时间）；
返回时间；
}
签出（）{
让今天=新日期（）；
让时间=
today.getHours（）+“：“+today.getMinutes（）；
this.setState（{signOut:time，historyOut:time}）；
返回时间；
}
setStatusOnline（）{
这是我的国家({
在线：“动画”，
离线：“绿色”，
错：错，
注销：“注销”
});
}
setStatusOffline（）{
这是我的国家({
离线：“红色”，
D：错，
签名：“登录”
});
}
showHistory（）{
this.setState（prevState=>({
打开：！prevState.open
}));
}
render（）{
const historyIn=this.state.historyIn.map（timeIn=>{
返回(
In:{timeIn}
)
});
返回(
{this.props.person.StaffID}
{this.props.person.StaffName}
this.showHistory（）}
variant=“info”
>
历史
{组织蛋白}


Out:{this.state.historyOut}
{
这个；
this.setState（{disabledIn:true}）；
这个.setStatusOnline（）；
}}
variant=“成功”
>
{this.state.signIn}
{
这个。注销（）；
this.setState（{disabledOut:true}）；
这个.setStatusOffline（）；
}}
>
{this.state.signOut}
);
}
}
导出默认行；

使用setState

inSignIn（）更新
historyIn

this.setState（{historyIn:this.state.historyIn}）；

如果这是您想要的，请参阅下面的代码

我的想法是创建一个正确的数组
，然后您可以使用
映射
将此数组映射到相应的JSX。谢谢@Keith，我更新了代码以反映这一点。但我现在收到，×TypeError:this.state.historyIn.map不是一个函数
import React, { Component } from "react";
import { Button, Collapse } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
import "../style/row.css";

class Row extends Component {
  constructor() {
    super();
    this.state = {
      signIn: "Sign-in",
      signOut: "Sign-out",
      disabledIn: false,
      disabledOut: true,
      online: "",
      offline: "",
      open: false,
      historyIn: [],
      historyOut: []
    };
  }

  signIn() {
    let today = new Date();
    let time =
      today.getHours() + ":" + today.getMinutes();
    this.setState({ signIn: time, historyIn: time  });
    this.state.historyIn.push(time);
    return time;
  }

  signOut() {
    let today = new Date();
    let time =
      today.getHours() + ":" + today.getMinutes();
    this.setState({ signOut: time, historyOut: time});
    return time;
  }

  setStatusOnline() {
    this.setState({
      online: "animated",
      offline: "green",
      disabledOut: false,
      signOut: "Sign-Out"
    });
  }

  setStatusOffline() {
    this.setState({
      offline: "red",
      disabledIn: false,
      signIn: "Sign-In"
    });
  }

  showHistory() {
    this.setState(prevState => ({
      open: !prevState.open
    }));
  }


  render() {
    const historyIn = this.state.historyIn.map(timeIn => {
      return (
        <div>
          In: {timeIn}
        </div>
      )
    });
    return (
      <React.Fragment>
        <tr>
          <td>{this.props.person.StaffID}</td>
          <td>
            <span
              style={{ backgroundColor: this.state.offline }}
              className={this.state.online}
            ></span>
            {this.props.person.StaffName}
            <Button
              size="sm"
              style={{ marginLeft: "20px" }}
              onClick={() => this.showHistory()}
              variant="info"
            >
               History
            </Button>
            <Collapse in={this.state.open}>
              <div>
                {historyIn}
                <br />
                Out: {this.state.historyOut}
              </div>
            </Collapse>
          </td>
          <td>
            <Button
              disabled={this.state.disabledIn}
              onClick={() => {
                this.signIn();
                this.setState({ disabledIn: true });
                this.setStatusOnline();
              }}
              variant="success"
            >
              {this.state.signIn}
            </Button>
          </td>
          <td>
            <Button
              disabled={this.state.disabledOut}
              variant="danger"
              onClick={() => {
                this.signOut();
                this.setState({ disabledOut: true });
                this.setStatusOffline();
              }}
            >
              {this.state.signOut}
            </Button>
          </td>
        </tr>
      </React.Fragment>
    );
  }
}

export default Row;