[英]Child Component's props are not getting updated
我有一個反應組件,我們稱之為基於標志的條件。
在 ComplianceCards js - 我根據標志 runTriggered 划分了 function。
runTriggered ? UpdateCards() : createCards()
ParentComponent ComplianceCards
- 當它進入createCards
function 時一切正常,但是當UpdateCard()
被調用時,我看到了我正在傳遞的最新值,但在子組件中它仍然顯示舊的道具值。
const UpdateCards = () => {
let view;
/**
* @param {*} deviceId
* get the compliance details
*/
let agag = getComplianceDetails(this.props.deviceId)
.then(parsedData => {
if (parsedData) {
return parsedData;
}
else {
console.log ("This function is not returning anything. Let's check why!")
}
})
.catch((error)=>{
console.log ("Let's see what's going on here -> ", error);
});
agag.then(data => {
console.log("agag data", data);
if (data) {
this.setState({
updatedCardData: data
});
const { updatedCardData } = this.state
if (updatedCardData) {
console.log("if come inside");
view = (
<div>
<DnxCardLayout name="cardlayout" style={{ padding: "5px" }}>
<div className="cards_flex_container">
{updatedCardData &&
updatedCardData.map(newCard => {
return (
<ComplianceCard
cardData={newCard}
key={newCard.complianceType}
handleClick={this._handleClick}
storeArchiveData={this.storeArchiveData}
/>
);
})}
</div>
</DnxCardLayout>
</div>
);
return view;
} else {
console.log("updatedCardData else come inside");
}
} else {
console.log("else come inside");
}
})
.catch((error)=>{
console.log ("Let's see what's going on here -> ", error);
});
};
當 UpdateCards() 被調用時,我的控制台打印 -
agag data `data`
ComplianceCards.js:504 if come inside
我可以在這里看到數據是最新更新的值,但在 s\child 組件中它是舊值或道具。
我的父組件ComplianceCards
-
export default class ComplianceCards extends Component {
/**
* Constructor
* @param {} props
*/
constructor(props) {
super(props);
this.state = {
// some states
};
}
/**
* Component DidMount
*/
componentDidMount() {
}
/**
* Component will un-mount
*/
componentWillUnmount() {
}
/**
* render function
*/
render() {
}
}
我已經根據評論進行了重構,以便清楚地理解。 我希望這將有所幫助。
這是我的子組件的 ComplianceCard 代碼 -
import React, { Component } from "react";
// some other dependencies
export default class ComplianceCard extends Component {
constructor(props) {
super(props);
this.state = {
latestArchivedVersion: null,
networkProfiles: null,
showImageLoader:false,
showConfigLoader:false
};
}
/**
* Get data for each complianceType
*/
componentDidMount() {
let { cardData, storeArchiveData } = this.props;
const complianceType = cardData.complianceType;
const deviceUuid = cardData.deviceUuid;
if (complianceType == labels.runningConfig) {
this.setState( {
showConfigLoader:true
})
getArchiveConfigDetails(deviceUuid).then(data => {
if (data) {
this.setState({
latestArchivedVersion: data[data.length - 1]
});
if (storeArchiveData) {
storeArchiveData(data);
}
this.setState( {
showConfigLoader:false
})
}
});
} else if (complianceType == labels.networkProfile) {
// TODO, do we really need this? we need to re-trigger the details api to get all NETWORK_PROFILE data
getComplianceDetails(deviceUuid, {
complianceType: labels.networkProfile
}).then(data => {
if (data) {
this.setState({
networkProfiles: [...data]
});
}
});
} else if (complianceType == labels.softwareImage) {
this.setState( {
showImageLoader: true
});
getImageDetails(deviceUuid).then(data => {
if (data) {
this.setState({
imageDetails: data,
showImageLoader: false
});
}
});
}
}
componentDidUpdate(prevProps) {
if (prevProps.cardData !== this.props.cardData) {
let { cardData } = this.props;
}
}
componentWillReceiveProps(nextProps) {
this.setState({ data: nextProps.data });
}
/**
* Component will un-mount
*/
componentWillUnmount() {
}
/**
* Handles click event
* @param {*} target
*/
handleClick = target => {
let { cardData, handleClick } = this.props;
const complianceType = cardData.complianceType;
handleClick(complianceType, cardData);
};
/**
* Component render function
*/
render() {
let { cardData } = this.props;
// render function code
}
}
請指出問題,謝謝..
你沒有從你的 if 子句中返回任何東西,因此 React 不會開始渲染這些卡片。
const createCards = runTriggered => {
let newCards, view = null;
/**
* @param {*} deviceId
* get the compliance details
*/
let agag = getComplianceDetails(this.props.deviceId).then(data => {
if (data) {
return data;
}
// .then afterwards will fail if no data is present
});
if (runTriggered) {
// No return here, assuming createCards is treated as a promise you can try:
// return agag.then(...
agag.then(data => {
newCards = data;
view = (...);
return view;
});
} else {
view = (...);
return view;
}
};
```
let agag = getComplianceDetails(this.props.deviceId)
.then(data => data.json())
.then(parsedData =>{
if (parsedData) {
return parsedData;
}
else{
console.log ("This function is not returning anything. Let's check why!")
}
})
.catch((error)=>{
console.log ("Let's see what's going on here -> ", error);
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.