子组件的道具没有更新

Question

我有一个反应组件，我们称之为基于标志的条件。

在 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 => {

当 UpdateCards() 被调用时，我的控制台打印 -

agag data `data`

ComplianceCards.js:504 if come inside

我可以在这里看到数据是最新更新的值，但在 s\child 组件中它是旧值或道具。

我已经根据评论进行了重构，以便清楚地理解。我希望这将有所帮助。

Answer 1

你没有从你的 if 子句中返回任何东西，因此 React 不会开始渲染这些卡片。const createCards = runTriggered => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let newCards, view = null;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /**&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;* @param {*} deviceId&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;* get the compliance details&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;*/&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let agag = getComplianceDetails(this.props.deviceId).then(data => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (data) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return data;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // .then afterwards will fail if no data is present&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (runTriggered) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // No return here, assuming createCards is treated as a promise you can try:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // return agag.then(...&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; agag.then(data => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; newCards = data;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; view = (...);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return view;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; view = (...);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return view;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; ```

Answer 2

let agag = getComplianceDetails(this.props.deviceId)&nbsp; &nbsp; .then(data => data.json())&nbsp; &nbsp; .then(parsedData =>{&nbsp; &nbsp; &nbsp; &nbsp; if (parsedData) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return parsedData;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; else{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log ("This function is not returning anything. Let's check why!")&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; })&nbsp; &nbsp; .catch((error)=>{&nbsp; &nbsp; &nbsp; &nbsp; console.log ("Let's see what's going on here -> ", error);&nbsp; &nbsp; });