子组件的道具没有更新

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

            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;

            }

        };

    ```

Answer 2

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);

    });