从缓存加载状态时，无法在closeTab方法中更新状态。由孩子触发的closeTabis。我已经尝试过使用{... this.state}，Object.Assign（），json.stringify（）进行缓存状态，然后使用json.parse，但并不缺乏。是否有其他方法可以从高速缓存设置状态并使其按预期工作（从高速缓存加载状态时可以关闭）。
class XPage extends React.Component {
constructor(props) {
if (iwb.debugConstructor)
if (iwb.debug) console.log("XPage.constructor", props);
super(props);
document.getElementById("id-breed").innerHTML = this.props.grid.name;
iwb.killGlobalSearch();
var oldPageState = iwb.pages[props.grid.id];
this.convertToArr = (invalidTabs)=>{
let validTab = [];
invalidTabs.forEach(item=>{
validTab.push({
name: item.name,
icon: item.icon,
title: item.title,
value: {...item.value},
})
})
return validTab;
}
if (oldPageState) {
this.state = {
activeTab : oldPageState.activeTab,
tabs:this.convertToArr(oldPageState.tabs)
};
this.dontRefresh = true;
} else {
this.state = {
activeTab: "x",
tabs: [
{ name: "x", icon: "icon-list", title: "Liste", value: props.grid }
]
};
}
/**
* @description
* a Function to toggle between tabs
* @param {Event} event - click event from tab
*/
this.toggle = event => {
var activeTab = event.target ? event.target.getAttribute("name") : event;
if (this.state.activeTab !== activeTab) {
var { tabs } = this.state;
tabs &&
tabs.forEach(tempTab => {
if (tempTab.name === activeTab) {
this.setState({ activeTab });
return true;
}
});
}
return false;
};
this.isActionInTabList = action => {
var { tabs } = this.state;
var stopToFetch = false;
tabs &&
tabs.forEach(tempTab => {
if (tempTab.name === action) {
this.toggle(action);
stopToFetch = true;
}
});
return stopToFetch;
};
/**
* @description
* A function responsible for opening tab getting component from the server and evaluating it on the page
* @param {String} action - ['1-&toffer_id=4'] EditForm satrts 1-* , InsertForm satrts 2-*
* @param {String} url - ['showForm?a=1&_fid=3988&twork_position_id=1']
* @param {Object} params - a varible wich holds request body params
* @param {Object} callAttributes - [{modal:false}] a variable used to pass params to a component which comes from the server
*/
this.openTab = (action, url, params, callAttributes) => {
if (this.state.activeTab !== action) {
if (this.isActionInTabList(action)) return;
fetch(url, {
body: JSON.stringify(params || {}), // must match 'Content-Type' header
cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
credentials: "same-origin", // include, same-origin, *omit
headers: { "content-type": "application/json" },
method: "POST", // *GET, POST, PUT, DELETE, etc.
mode: "cors", // no-cors, cors, *same-origin
redirect: "follow", // *manual, follow, error
referrer: "no-referrer" // *client, no-referrer
})
.then(
response =>
response.status === 200 || response.status === 0
? response.text()
: Promise.reject(
new Error(response.text() || response.statusText)
)
)
.then(
result => {
if (result) {
var f;
eval("f=(callAttributes, parentCt)=>{\n" + result + "\n}");
var serverComponent = f(callAttributes || {}, this);
if (serverComponent) {
if (callAttributes && callAttributes.modal) {
//console.log(callAttributes);
iwb.showModal({
body: serverComponent,
size: "lg",
title:
serverComponent.props && serverComponent.props.cfg
? serverComponent.props.cfg.name
: "",
color: "primary"
//style :{maxWidth:'90%'}
});
} else {
var plus = action.substr(0, 1) == "2";
var { tabs } = this.state;
if (this.isActionInTabList(action)) return;
tabs.push({
name: action,
icon: plus ? "icon-plus" : "icon-doc",
title: plus ? " Yeni" : " Düzenle",
value: serverComponent
});
this.setState({ activeTab: action, tabs });
}
}
} else {
toastr.error("Sonuc Gelmedi", " Error");
}
},
error => {
toastr.error(error, "Connection Error");
}
);
}
};
iwb.openTab = this.openTab;
/**
* @description
* A function responsible for closing tab and
* delating CurrentTab from the state of Xpage Component
* this function will be passed to whenever new tab is opened
*/
this.closeTab = (event, forceRelaod = false) => {
var { activeTab, tabs } = this.state;
if (activeTab == "x") return;
tabs =
tabs &&
tabs.length > 0 &&
tabs.filter(tempTab => tempTab.name !== activeTab);
if (forceRelaod) {
tabs["0"].value.forceRelaod = Math.floor(Math.random() * 1000);
}
this.setState({ activeTab: "x", tabs },() => {
alert();
});
};
/**
* @description
* A function is used to open new FormTab
* @param {string} url
*/
this.openForm = (url, callAttributes = {}) => {
if (url) this.openTab("1-" + Math.random(), url, {}, callAttributes);
return false;
};
iwb.openForm = this.openForm;
}
componentWillUnmount() {
iwb.killGlobalSearch();
iwb.pages[this.props.grid.id] = Object.assign({},this.state);
}
render() {
if (iwb.debugRender) if (iwb.debug) console.log("XPage.render");
return _(
"div",
{},
_(
Row,
null,
_(
Col,
{ className: "mb-4" },
_(
Nav,
{ tabs: true, hidden: this.state.tabs.length == 1 },
this.state.tabs.map(({ name, icon, title }, index) => {
return _(
NavItem,
{ key: "NavItem" + index },
_(
NavLinkS,
{
className: classNames({
active: this.state.activeTab === name
}),
name,
onClick: event => this.toggle(event)
},
_("i", {
className: icon,
name,
title,
onClick: event => this.toggle(event)
}),
title && name != "x" && this.state.activeTab === name && title
)
);
})
),
_(
TabContent,
{ activeTab: this.state.activeTab },
this.state.tabs.map(({ name, value }, index) => {
return _(
TabPane,
{ key: "TabPane" + index, tabId: name },
value.gridId
? _(XMainGrid, {
openTab: this.openTab,
closeTab: this.closeTab,
...value
})
: value
);
})
)
)
)
);
}
}