Antd Modal如何更新其中的值

如何解决Antd Modal如何更新其中的值

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

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

enter image description here 单击删除按钮后，各项保持不变，但是当我关闭并打开模式时，它将更新。 enter image description here

我应该怎么做才能改变它？我尝试了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
};

解决方法

您的代码中的问题在removeItem中。您正在尝试突变tableOrder。根据{{​​3}}：

请不要直接更改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

这里是演示：react docs

,

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

  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}
     />

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

改进的代码Live demo