State is being changed, but display not updating-CodePudding

I've seen quite a few posts about this, but none of the solutions seem to work for me.

I have a render method that is being mapped to list the different sections stored in a state(this part works as expected):

render() {
        return (
            <ThemeProvider theme={theme}>
                <Div>
                    <hr />
                    <div>
                        {this.state.sections.map(section => (
                            <div
                                className="mb-3"
                                key={section.section_title}
                            >
                                <h3>{section.section_title}</h3>
                            </div>
                        ))}
                    </div>
        )
    }

However, I have a modal that allows you to create a new section by giving it a name and clicking submit. That does create it and add it to my database table as expected. But, then when I run the method to pull that data down, and change the state to include the new section, it works, and does indeed change the state to include the new section. But it does not update the display unless I reload the page. Can anyone see why?

getProjectSections(projId) {
        fetch(API_URL   `/billingcalculator/sections/distinct/${projId}`)
            .then((res) => {
                if (!res.ok) {
                throw new Error()
                }
                return res.json()
            })
            .then((result) => {
                let listedSections = [...result];
                this.setState({ sections: listedSections });
            })
            .catch((error) => {
                console.log(error);
        })
    }

the getProjectSections() runs when you click the submit button a creating a new section which runs this:

handleSectionCreateSave() {
        fetch(API_URL   `/billingcalculator/section/create`, {
            method: "PUT",
            body: JSON.stringify({
                projectId: this.props.billProjId,
                sectionTitle: this.state.newSectionTitle
            }),
            headers: { "Content-Type": "application/json" },
        })
            .then((res) => {
                if (!res.ok) {
                    throw new Error();
                }
                return res.json();
            })
            .then((data) => console.log(data))
            .catch((err) => console.log(err))
            .then(this.getProjectSections(this.props.billProjId))
            .then(this.setState({ showSectionModal: false }))
            .catch((err) => console.log(err));
    }

CodePudding user response：

You are calling state updates before request happens:

handleSectionCreateSave() {
    fetch(API_URL   `/billingcalculator/section/create`, {
        method: "PUT",
        body: JSON.stringify({
            projectId: this.props.billProjId,
            sectionTitle: this.state.newSectionTitle
        }),
        headers: { "Content-Type": "application/json" },
    })
        .then((res) => {
            if (!res.ok) {
                throw new Error();
            }
            return res.json();
        })
        .then((data) => console.log(data))
        .catch((err) => console.log(err))
        // you called these function now, instead after fetch
        // use () => 
        .then(() => this.getProjectSections(this.props.billProjId))
        .then(() => this.setState({ showSectionModal: false }))
        .catch((err) => console.log(err));
}