2

データベースからデータを削除するためにバックエンドに API 呼び出しを行うカスタム アクションがあります。これにより、表示されているアイテムがデータベースから削除されます。このアクションの実行時にテーブル データを更新するにはどうすればよいですか?

これは、マテリアル テーブルの問題#457からのものです。

最初は、setState の変更を使用してコンポーネントを再レンダリングしようと考えましたが、うまくいかないようです。(それに応じて状態が変化するのを見ることができますが、テーブルがデータを再度フェッチすることはありません)

  {
                  icon: "delete",
                  tooltip: "Delete Partner",
                  onClick: (event, rowData) => {
                    console.log(rowData);
                    let data = {
                      entityId: rowData[0].entityId
                    };
                    fetch("/deleteEntity", {
                      method: "POST",
                      headers: {
                        "Content-Type": "application/json"
                      },
                      body: JSON.stringify(data)
                    }).then(response => {
                      if (response.status === 204) {
                        let index = currentSelectedRows.findIndex(
                          x => x.entityId === rowData[0].entityId
                        );
                        currentSelectedRows.splice(index, 1);
                        this.setState({ currentSelected: currentSelectedRows });
                        console.log("Partner Deleted");
                      } else if (response.status === 500) {
                        console.log("Something went wrong");
                      }
                    });
                  }
                }
4

2 に答える 2

0

基本的にテーブルのマウントを解除することで、テーブルを再レンダリングできます。次に例を示します。

class MyStateComp extends React.Component {
  state = { loading: false }

  handleDelete = (event, rowData) => {
    this.setState({ loading: true })
    simulateAsyncDelete(event, rowData)
      .then(() => this.setState({loading: false}))
  }

  render() {
    loading
    ? <div>loading...</div>
    : <MaterialTable
        {/* other props */}
        actions={[
          {
            icon: 'delete',
            tooltip: 'Delete User',
            onClick: this.handleDelete
          }
        ]}
    />
  }
}

私は更新を強制しようとしましthis.forceUpdateたが、うまくいきませんでした.私の推測では、データはcomponentDidMount非常に制限されている状態でフェッチされていると思います:(

于 2019-05-13T02:27:34.627 に答える