reactjs - Update child component when state in parent component changes

Question

I have a parent component which has the Hierarchy component inside it. The parent component is rendered conditionally based on the value of a variable newform in the state

    getFormRendererIO = () => {
        return (
            <div className="form-renderer-div">
                {this.state.showHierarchy ? (
                    <div className="form-renderer-div-hierarchy">
                        <Hierarchy
                            processName={this.props.processName}
                            // treeItems={HierarchyData}
                            body={this.props.body}
                            treeItems={this.state.hierarchyData}
                            openStartFormById={(e, id) => this.openStartFormById(e, id)} />
                    </div>
                ) : (
                        <div></div>
                    )}
                <div
                    className={this.state.showHierarchy ?
                        'form-renderer-div-renderer'
                        : 'form-renderer-div-renderer-without-hierarchy'}>
                    {
                        !this.state.showHierarchy ?
                            (
                                <div>
                                    <span>
                                        <FontAwesomeIcon
                                            icon={faLongArrowAltLeft}
                                            onClick={this.openLandingPage}
                                            className='backIcon'
                                            title='Back'
                                        />
                                        {/* <Button
                                            className='other-button'
                                            onClick={this.openLandingPage}>
                                            Back</Button> */}
                                    </span>
                                </div>
                            ) : (<div></div>)
                    }
                    <div>
                        <FormRendererIO
                            processInstanceId={this.props.processInstanceId}
                            body={this.state.formJson}
                            secondForm={this.props.secondForm}
                            completedTask={this.state.completedTask}
                            key={this.props.index}></FormRendererIO>
                        {
                            this.state.showHierarchy ? (
                                <span>
                                    <Button
                                        className='other-button'
                                        onClick={this.openNewForm}>
                                        New</Button>
                                    {/* <FontAwesomeIcon
                                icon={faPlus}
                                onClick={this.openNewForm}
                                className='plusIcon'
                                title='New' /> */}
                                </span>
                            ) : (<div></div>)
                        }
                    </div>
                </div>
            </div>
        );
    }

render() {
        return (
            <>
                {
                    this.state.newForm ? this.getFormRendererIO() : this.getLandingPage()
                }
            </>
        );
    }

Below is the Hierarchy component

class Hierarchy extends Component {

    state = {
        hierarchyData: []
    };

    constructor(props) {
        super(props);
    }

    getTreeItemsFromData = (treeItems, index) => {
        // var hierarchyDataStr = localStorage.getItem("hierarchyData");
        // console.log(hierarchyDataStr ? JSON.parse(hierarchyDataStr) : 'NULL');
        console.log(treeItems);
        if (treeItems.length > 0) {
            return treeItems.map((treeItemData) => {
                let children = undefined;

                if (treeItemData.children && treeItemData.children.length > 0) {
                    children = this.getTreeItemsFromData(treeItemData.children);
                }

                return (
                    <SidebarLink>
                        <StyledTreeItem
                            key={treeItemData.parent}
                            nodeId={treeItemData.parent}
                            label={treeItemData.parent === 'root' ? '' : treeItemData.parent}
                            children={children}
                            // onClick={() => handleClick(treeItemData.id)}
                            onClick={(e) => this.props.openStartFormById(e, treeItemData)}
                        />
                    </SidebarLink>
                );
            });
        }
    }

    render() {
        return (
            <TreeView
                // className={this.classes.root}
                defaultExpanded={["1"]}
                defaultCollapseIcon={<MinusSquare />}
                defaultExpandIcon={<PlusSquare />}
                defaultEndIcon={<CloseSquare />}
            >
                {this.getTreeItemsFromData(this.props.treeItems)}
            </TreeView>
        )
    };
}

export default Hierarchy;

I have an API inside the Parent componentDidMount() which updates the state of hierarchyData which is eventually passed as props in Hierarchy.

Below is the method calling the API

async getHierarchyFromAPI() {
        var formIOString = this.props.body.formIoString;
        var parentId = 'parent';
        var childId = 'child';
        var decisionId = 'decision';
        console.log(formIOString);
        if (formIOString) {
            var formIOJSON = JSON.parse(formIOString);
            var formComponents = formIOJSON.components;
            console.log(formComponents);
            for (var i = 0; i < formComponents.length; i++) {
                console.log(formComponents[i]["description"]);
                if (formComponents[i]["key"] === 'parent') {
                    parentId = this.getElementId(formComponents[i]);
                    parentId = formComponents[i]["key"];
                }
                if (formComponents[i]["name"] === 'child') {
                    childId = this.getElementId(formComponents[i]);
                    childId = formComponents[i]["name"];
                }
                if (formComponents[i]["key"] === 'decision') {
                    decisionId = formComponents[i]["key"];
                }
            }
        }

        const requestOptions = {
            method: "GET",
            credentials: "include",
        };

        let data = await fetch(localStorage.getItem("apiURL") +
            '/GRCNextBPMN/getHeirarchyData?processKey=' + this.props.processName.replace(/s+/g, "")
            + '&parent=' + parentId
            + '&child=name' //+  childId
            + '&decisionId=' + decisionId
            + '&decisionValue=Approved',
            requestOptions)
            .then(response => response.json())
        this.setState({ hierarchyData: data });
    }

The problem that I' am facing is that the API call is async and by the time the hierarchyData is updated the Hierarchy component is already rendered and the it shows as blank.

I want the hierarchyData to be updated in the Hierarchy component once the API call is finished and the component should be rendered. Please suggest a possible solution to resolve the issue

Added the componentDidMount method

componentDidMount() {
        if (this.landingPages.includes(this.props.processName)) {
            const requestOptions = {
                method: "GET",
                credentials: "include",
            };
            fetch(localStorage.getItem("apiURL") +
                '/GRCNextBPMN/getGridCols/' +
                this.props.processName.replace(/s+/g, ""),
                requestOptions)
                .then(response => response.json())
                .then(results => {
                    this.setState({
                        gridCols: results,
                        newForm: false,
                        showHierarchy: false
                    });
                })
        } else {
            this.getHierarchyFromAPI();
        }
    }

Answer 1

等待大神答复