Question

从表中删除条目后，我试图让我的组件重新呈现。我已经尝试绑定我的函数并使用 this.forceUpdate() 但似乎没有任何效果。任何帮助将不胜感激！

这是我的组件

 onDeleteClick = () => {
        this.setState({
          ...this.state,
          visible: false,
        });
        var tenantList = this.state.tenantData;
        for (var i = 0; i < tenantList.length; i++) {
          if (tenantList[i].userId == this.state.userId) {
            console.log(this.state.userId);
            delTenant({ _id: tenantList[i]._id });
            deleteTenant({ _id: this.state.userId });
            this.deleteAudit({ tenantID: tenantList[i]._id }).then(() => {
              this.setState(this.state); // this should rerender the component but it does not
              console.log("force update");
            });
            break;
          }
        }

这是我组件中的删除函数

<Modal
              title="Modal"
              visible={this.state.visible}
              onOk={this.onDeleteClick}
              onCancel={this.hideModal}
              okText="Confirm"
              cancelText="Cancel"
            >
              <p>Are you sure you want to delete this Tenant?</p>
            </Modal>

这是我的 AntD 组件

this.deleteAudit({ tenantID: tenantList[i]._id }).then(() => {
          // this.setState(this.state); // this should rerender the component but it does not
          this.getTenantFunction(); // this gets the new data from database and sets the state of tenantData to the updated one
        });

编辑：

Soultion found - 我的组件重新渲染，但我的tenantData 状态没有改变，因为我在删除条目后忘记从数据库中获取数据。

{{1}}

Answer 1

this.setState(this.state); // this should rerender the component but it does not

如果你的 state 或 props 没有改变，React 不会重新渲染你的组件。

我不知道为什么 forceUpdate 不起作用，看这个例子

import React from "react";

export default class App extends React.Component {
  constructor() {
    super();
    this.state = {
      tenantData: [],
      searchText: "",
      searchedColumn: "",
      tenantInfo: {},
      visible: false,
      userId: null,
      rerender: ""
    };
  }
  onDeleteClick = () => {
    console.log("click");
  };
  onDeleteClickForced = () => {
    console.log("clickForced");
    this.forceUpdate();
  };

  render = () => {
    console.log("render");
    return (
      <>
        <button onClick={() => this.onDeleteClick()}>Not forced</button>
        <button onClick={() => this.onDeleteClickForced()}>Forced</button>
      </>
    );
  };
}

为什么 setState(this.state) 不触发重新渲染？

1 个答案: