Antd Modal如何更新里面的值

Question

我正在使用 Antd Modal 通过将道具传递给 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
};

Answer 1

您代码中的问题出在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

Answer 2

您可以在removeItem函数中使用filter方法

  removeItem = (item) => {
    const filtered = this.state.tableOrder.filter(
      (order) => item.name !== order.name
    );
    console.log(item, filtered);
    this.setState({
      tableOrder: filtered
    });
  };

还有一件事你应该避免将你的道具分配给状态，比如

   this.state = {
      tableOrder: props.tableOrder,
    };

而不是分配给状态直接使用它作为道具

     <Table
      dataSource={this.props.tableOrder}
     />

在大多数情况下，这是一种反模式。 不要“将道具复制到状态”。 它为您的数据创建了第二个真实来源，这通常会导致错误。 最好的真相来源之一。

改进的代码现场演示