时间戳

首页 > 解决方案 > 无法访问“此”

reactjs - 无法访问“此”

问题描述

我正在使用 MERN 堆栈开发一个 Web 应用程序，该堆栈显示一个客户表，其中包含他们的姓名、电子邮件和电话号码。我还没有实现 Redux，但我正在使用 'uuid' 来补充表中的数据，直到我可以设置 redux 存储。到目前为止，我已经显示了列表并将客户端添加到列表中工作正常，但是我在使用讨厌的删除按钮时遇到了问题。

这是当前的 ClientTable 组件

import React, { Component } from "react";
import { Table, Container, Button } from "reactstrap";
import { connect } from "react-redux";
import {
  getClients,
  addClient,
  editClient,
  deleteClient,
} from "../actions/clientActions";
import PropTypes from "prop-types";

const renderClient = (clients, index, id) => {
  return (
    <tr key={index}>
      <td>
        <Button
          className="remove-btn"
          color="danger"
          size="sm"
          onClick={() => {
            this.setState((state) => ({
              clients: state.clients.filter((client) => client.id !== id),
            }));
          }}
        >
          &times;
        </Button>
      </td>
      <td>{clients.name}</td>
      <td>{clients.email}</td>
      <td>{clients.number}</td>
    </tr>
  );
};

class ClientTable extends Component {
  componentDidMount() {
    this.props.getClients();
  }

  onDeleteClick = (id) => {
    this.props.deleteClient(id);
  };

  render() {
    const { clients } = this.props.client;
    // const { clients } = this.state;
    return (
      <Container id="listContainer">
        <Table
          id="listTable"
          className="table-striped table-bordered table-hover"
          dark
        >
          <tr class="listRow">
            <thead id="tableHeader">
              <tr>
                <th id="listActions">Actions</th>
                <th id="listName">Name</th>
                <th id="listEmail">Email</th>
                <th id="listNumber">Number</th>
              </tr>
            </thead>
            <tbody class="listRow">{clients.map(renderClient)}</tbody>
          </tr>
        </Table>
      </Container>
    );
  }
}

ClientTable.propTypes = {
  getClients: PropTypes.func.isRequired,
  client: PropTypes.object.isRequired,
};

const mapStateToProps = (state) => ({
  client: state.client,
});

export default connect(mapStateToProps, {
  getClients,
  deleteClient,
  addClient,
})(ClientTable);

这是导致我出现问题的代码

<Button
          className="remove-btn"
          color="danger"
          size="sm"
          onClick={() => {
            this.setState((state) => ({
              clients: state.clients.filter((client) => client.id !== id),
            }));
          }}
        >
          &times;
        </Button>

当我单击“删除”按钮时，我不断收到TypeError: Cannot read property 'setState' of undefined

我知道错误是因为“this”没有绑定到任何东西，但我不确定如何在 onClick 事件中绑定它，如果这甚至可能，或者甚至绑定到什么。我只是迷失了如何解决这个问题。（我对 React 还是很陌生）。

如果有人有任何想法，将不胜感激！

标签： reactjsthisundefinedsetstatemern

解决方案

将 renderClient 函数移至 ClientTable，并将其用作该类的方法。

class ClientTable extends Component {
  componentDidMount() {
    this.props.getClients();
  }

  renderClient = (clients, index) => {
    return (
      <tr key={index}>
       <td>
        <Button
          className="remove-btn"
          color="danger"
          size="sm"
          onClick={() => this.onDeleteClient(clients.id)}
        >
          &times;
        </Button>
      </td>
      <td>{clients.name}</td>
      <td>{clients.email}</td>
      <td>{clients.number}</td>
    </tr>
  );
};


  onDeleteClick = (id) => {
    this.props.deleteClient(id);
  };

  render() {
    const { clients } = this.props.client;
    // const { clients } = this.state;
    return (
      <Container id="listContainer">
        <Table
          id="listTable"
          className="table-striped table-bordered table-hover"
          dark
        >
          <tr class="listRow">
            <thead id="tableHeader">
              <tr>
                <th id="listActions">Actions</th>
                <th id="listName">Name</th>
                <th id="listEmail">Email</th>
                <th id="listNumber">Number</th>
              </tr>
            </thead>
            <tbody class="listRow">{clients.map(this.renderClient)}</tbody>
          </tr>
        </Table>
      </Container>
    );
  }
}

推荐阅读