Question

编辑-我现在遇到TypeError：this.state.historyIn.map不是以下代码中的函数。

我想知道是否有人可以提供帮助。我已经挑战自己创建一个登录应用程序来自学React。

我正在寻找一种方法，每次触发“登录”或“退出”事件时，都会附加“输入”和“输出”历史记录。每次单击按钮时，我都可以替换状态，但是现在有点卡住了。

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

我希望这是有道理的。

如果您需要检查其他任何组件-https://github.com/samakers/digi-sign-in/tree/master/client/src/components

，则可以在此处查看完整的项目

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;

Answer 1

使用setState historyIn来更新inSignIn()

this.setState({ historyIn: this.state.historyIn });

如果需要的话，请参见下面的代码

https://codesandbox.io/s/silly-jepsen-xr9ql

反应-附加而不是替换状态

1 个答案: