javascript - 子组件的道具没有更新
问题描述
我有一个反应组件,我们称之为基于标志的条件。
在 ComplianceCards js 中 - 我根据标志 runTriggered 划分了功能。
runTriggered ? UpdateCards() : createCards()
ParentComponent ComplianceCards
- 当它进入createCards
函数时一切正常,但是当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
}
}
请指出问题,谢谢..
解决方案
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);
});
推荐阅读
- reactjs - MobX 和 Firebase,TypeError:WEBPACK_IMPORTED_MODULE_0__firebase.b.ref 不是函数
- javascript - babel loader 仅在文件上工作
- php - 在未找到 Laravel 类中使用 aws-sdk-php
- python - 我的 IDE 和 PythonTutor.com 之间的准确性?
- mysql - 如何通过codeigniter中的同一列获取多行
- c# - 获取每月的星期六
- r - 每次更改时更改计数,但在 R 中遇到 0 时重置
- reactjs - ReactJS - componentWillReceiveProps 使用
- angular - 在 ngx-datatable angular 4 中使用 *ngIf 隐藏/显示列时,不维护表列的拖放顺序
- excel - 基于 MAX 值使用 Powershell 在 Excel WB 中查找 ROW 值