reactjs - React 反复运行函数，但我没有调用它

问题描述

我正在使用反应表（https://github.com/react-tools/react-table）来呈现费用表。在一栏中，应该有一个“批准”费用的按钮。这是这样处理的：

const columns = [
  {
    Header: "Description",
    accessor: "description"
  },
  {
    Header: "Approve",
    accessor: d => {
      return <button onClick={this.approveExpense(d.id)}>Approve</button>;
    },
    id: "approved"
  }
];

其中approveExpense 函数定义为：

  approveExpense = id => {
    fetch(`${apiRoot}expenses_pending/`, {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        Authorization: `Token ${this.props.auth.token}`
      },
      body: JSON.stringify({
        id: id
      })
    }).then(res => {
      if (res.status === 200) {
        this.setState({
          issues: this.state.expenses.filter(expense => expense.id != id)
        });
      } else {
        console.log("Error");
      }
    });
  };

然而奇怪的是，当页面加载时，它表现得好像所有这些按钮都被重复按下，每秒多次（直到粉丝开始发疯，我停止了反应服务器）。

我在做傻事吗？

全班：

class ExpensePendingAdmin extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    fetch(`${apiRoot}expenses_pending`, {
      method: "GET",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        Authorization: `Token ${this.props.auth.token}`
      }
    })
      .then(response => response.json())
      .then(data => {
        console.log(data);
        this.setState({
          expenses: data
        });
      });
  }

  approveExpense = id => {
    fetch(`${apiRoot}expenses_pending/`, {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        Authorization: `Token ${this.props.auth.token}`
      },
      body: JSON.stringify({
        id: id
      })
    }).then(res => {
      if (res.status === 200) {
        this.setState({
          issues: this.state.expenses.filter(expense => expense.id != id)
        });
      } else {
        console.log("Error");
      }
    });
  };

  render() {
    const columns = [
      {
        Header: "Description",
        accessor: "description"
      },
      {
        Header: "Logged At",
        id: "loggedAt",
        accessor: d =>
          moment(d.expense_incur_datetime).format("HH:mm - ddd d/M/YYYY")
      },
      {
        Header: "Amount",
        accessor: d => `£${d.amount}`,
        id: "amount"
      },
      {
        Header: "Approve",
        accessor: d => {
          return <button onClick={this.approveExpense(d.id)}>Approve</button>;
        },
        id: "approved"
      },
      {
        Header: "Paid",
        accessor: d => {
          console.log(d);
          return d.is_unpaid ? "No" : "Yes";
        },
        id: "paid"
      }
    ];

    return (
      <div className="container-fluid">
        {this.state.expenses ? (
          <>
            <div className="row">
              <div className="col text-center">
                <h2>Pending Expenses</h2>
              </div>
            </div>
            <div className="row">
              <div className="col">
                <ReactTable
                  data={this.state.expenses}
                  columns={columns}
                  minRows="0"
                  minWidth="50"
                  showPagination={false}
                />
              </div>
            </div>
          </>
        ) : (
          "LOADING"
        )}
      </div>
    );
  }
}

标签： reactjsreact-table

reactjs - React 反复运行函数，但我没有调用它

问题描述

解决方案

推荐阅读