时间戳

首页 > 解决方案 > Antd Modal如何更新其中的值

javascript - Antd Modal如何更新其中的值

问题描述

我正在使用 Antd Modal 通过将 props 传递给 TableDetail 组件来显示订单信息。问题是当我尝试按照我使用 setState 的顺序删除项目时，模态不会更新其数据。

https://codesandbox.io/s/antd-reproduction-template-forked-vu3ez 上面提供了一个简单的复制版本。

在此处输入图像描述 单击删除按钮后，项目保持不变，但当我关闭并打开模式时，它会更新。 在此处输入图像描述

我应该怎么做才能让它改变？我试过 forceUpdate() 但它不起作用。

这是 TableDetail 组件。

export default class TableDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tableOrder: props.tableOrder,
      column: []
    };
  }

  tableInitializer = () => {
    const column = [
      {
        title: "name",
        render: (item) => {
          return <span>{item.name}</span>;
        }
      },
      {
        title: "price",
        render: (item) => {
          return item.price;
        }
      },
      {
        title: "amount",
        render: (item) => {
          return <span>{item.amount}</span>;
        }
      },
      {
        title: "removeButton",
        render: (item) => {
          return (
            <Button
              type="link"
              style={{ color: "red" }}
              onClick={() => this.props.removeItem(item)}
            >
              Remove
            </Button>
          );
        }
      }
    ];
    this.setState({
      column
    });
  };

  UNSAFE_componentWillMount() {
    this.tableInitializer();
  }

  render() {
    return (
      <Modal
        visible={true}
        title={
          <span style={{ fontSize: "1.5rem", fontWeight: "bold" }}>
            Table: {this.state.tableName}
          </span>
        }
        cancelText="Cancel"
        okText="OK"
        onCancel={this.props.hideModal}
      >
        <Table
          columns={this.state.column}
          dataSource={this.state.tableOrder}
          rowKey="name"
        />
      </Modal>
    );
  }
}

TableDetail.propTypes = {
  tableOrder: PropTypes.array.isRequired,
  tableName: PropTypes.string.isRequired,
  hideModal: PropTypes.func.isRequired,
  removeItem: PropTypes.func.isRequired
};

标签： javascriptreactjsantd

解决方案

您的代码中的问题在removeItem. 您正在尝试改变 tableOrder。根据反应文档：

永远不要直接改变 this.state，因为之后调用 setState() 可能会替换你所做的改变。将 this.state 视为不可变

setState() 不会立即改变 this.state 而是创建一个挂起的状态转换。在调用此方法后访问 this.state 可能会返回现有值。

所以这就是为什么它有点异步，你看不到你更新的变化。你需要这样做：

removeItem = (item) => {
    const { tableOrder } = this.state;
    const newTable = [...tableOrder]; <- Create new variable and update variable
    for (let i = 0; i < newTable.length; i++) {
      if (item.name === newTable[i].name) {
        console.log("Got it! " + newTable[i].name);
        newTable.splice(i, 1);
        console.log("new table: ", tableOrder);
        break;
      }
    }
    this.setState({
      tableOrder: newTable <- update here
    });
  };

您不需要实际修改数组，您也可以简单地执行此操作：

this.setState(
{
tableOrder: this.state.tableOrder.filter(data => !(data.name===item.name))
}
)
//filter creates new array

这是演示：https ://codesandbox.io/s/antd-reproduction-template-forked-j4bfl?file=/tables.js

推荐阅读