リスト フィルターの結果は変更されません
シナリオの説明:
リスト ページでテーブルがスクリーニングされた後、クリックして詳細を入力するか、新しいテーブルを追加してから戻っても、リストのスクリーニング結果は変更されません。
実装原則:
1. [追加] または [編集] をクリックすると、フィルター処理された値を取得し、その値を sessionStorage (searchData) に保存し、別の値を保存して、リスト ページのパス (urlLink) を保存します。
2. リストとフィルターから呼び出される関数(handleSubmit())で、
①判断、リストの下ではなく、新規または編集ページから他のページにジャンプし、ページ パスが保存されたリスト パスではないことを判断して、保存 他のリストのデータに影響を与えないように、フィルタリングされたデータをクリアします
② 判断、追加または編集からリスト ページに戻り、データを取り出してレンダリングします
再フィルタリングまたはレンダリングに戻るジャンプに関係なく、sessionStorage が必要ですクリアする。
3. 新規または編集ページが正常に追加または編集された後に一覧ページに戻った場合、フィルター処理されたデータを保持する必要はなく、正常に追加した後に sessionStorage をクリアする必要があります。
コードは以下のように表示されます:
<Button type="primary" style={
{
marginBottom: '30px' }}
onClick={
async () => {
const values = await this.form.validateFields();
const {
pageNumber, pageSize } = this.state;
sessionStorage.setItem(
"searchData",
JSON.stringify({
values: values, pageNumber, pageSize })
);
sessionStorage.setItem(
"urlLink",
window.location.pathname
);
this.props.history.push({
pathname: "/marketing/couponCode/_/add",
});
}}>新增</Button>
{
title: "操作", dataIndex: "operator", width: 90,
render: (value, record) => {
const {
id } = record
const items = [
{
label: '查看',
onClick: async () => {
const values = await this.form.validateFields();
const {
pageNumber, pageSize } = this.state;
sessionStorage.setItem(
"searchData",
JSON.stringify({
values: values, pageNumber, pageSize })
);
sessionStorage.setItem(
"urlLink",
window.location.pathname
);
this.props.history.push({
pathname: "/marketing/couponCode/_/check",
state: {
id: id, type: "check" },
});
},
}
]
return <Operator items={
items} />;
}
},
componentDidMount() {
this.handleSubmit();
}
handleSubmit = async () => {
if (this.state.loading) return;
if (window.location.pathname != sessionStorage.getItem("urlLink")) {
sessionStorage.removeItem("searchData")
}
if (sessionStorage.getItem("searchData")) {
const {
values, pageNumber, pageSize } = JSON.parse(
sessionStorage.getItem("searchData")
);
this.form.setFieldsValue({
...values });
this.state.pageNumber = pageNumber;
this.state.pageSize = pageSize;
}
const values = await this.form.validateFields();
// 生成时间
const createStartTime = !values.createTime ? '' : moment(values.createTime[0]._d).format('YYYY-MM-DD 00:00:00')
const createEndTime = !values.createTime ? '' : moment(values.createTime[1]._d).format('YYYY-MM-DD 23:59:59')
const {
pageNumber, pageSize } = this.state;
const params = {
...values,
pageNumber,
pageSize,
createStartTime,
createEndTime
};
this.setState({
loading: true });
this.props.ajax
.post("/market/discount/page", params)
.then((res) => {
if (res.success) {
const dataSource = res.data.records || [];
sessionStorage.removeItem("searchData")
sessionStorage.removeItem("urlLink")
const total = res.data.total || 0;
this.setState({
dataSource, total });
}
})
.finally(() => this.setState({
loading: false }));
};
this.props.ajax.post('/market/discount/update', params)
.then(res => {
if (res.state === 1) {
sessionStorage.removeItem("searchData")
sessionStorage.removeItem("urlLink")
message.success('保存成功')
this.props.history.goBack();
}
})
React の setState コールバック関数の詳細な説明
setState() は常にすぐにコンポーネントを更新するとは限りません。更新をバッチ処理するか、後日まで更新を延期する場合があります。これにより、 setState() を呼び出した直後に this.state を読み取ることが潜在的な落とし穴になります。代わりに、 componentDidUpdate またはsetState コールバック ( setState(updater, callback) )を使用してください。どちらも更新が適用された後に起動することが保証されています。
React を使用する過程で、必要な特定の状態にアクセスするために this.state を使用できますが、状態を更新または変更する必要がある場合、一般的に言えば、状態を更新する目的を達成するために setState() 関数を使用します。 , setState() 関数の実行により、ページがトリガーされ、UI が再レンダリングされます。しかし！! ! setState は非同期です! ! !
1. 文法:
setState(updater[, callback]) //
updater は変更される状態オブジェクトで、callback は状態によって引き起こされるページの再レンダリングのためのコールバックで、componentDidUpdate と同等です。一般的に、ページ
の状態を設定するときは、最初に状態を設定する必要があります。次に、ページのいくつかのパラメーターを変更します。変更するときは、setState のコールバック関数を使用できます。
2.違いを分析する
コールバックでパラメーターを使用する代わりに、設定直後の状態を使用します。
this.state = {
foo: 1}; this.setState({
foo: 123}); console.log(this.state.foo); // 1
コールバックで設定された状態を呼び出す
this.state = {
foo: 2}; this.setState({
foo: 123}, ()=> {
console.log(foo); // 123 });
setState のコールバック関数の機能はほぼ同じで、この関数は componentDidUpdate 関数に相当し、ライフサイクルの関数に似ています。
<Table
loading={
loading}
columns={
this.columns}
dataSource={
dataSource}
rowKey="id"
pageNum={
pageNumber}
pageSize={
pageSize}
/>
<Pagination
total={
total}
pageNum={
pageNumber}
pageSize={
pageSize}
showTotal={
total => `总条数： ${
total}`}
onPageNumChange={
(pageNum) =>
this.setState({
pageNumber: pageNum }, () => this.handleSubmit())
}
onPageSizeChange={
(pageSize) =>
this.setState({
pageSize, pageNumber: 1 }, () => this.handleSubmit())
}
/>