问为什么组件方法使用fetch和settingState响应时不会导致componentDidMount()？

EN

[
    {
        "txt": "login",
        "idRole": null
    },
    {
        "txt": "logout",
        "idRole": null
    },
    {
        "txt": "register",
        "idRole": [
            1
        ]
    },
    {
        "txt": "profile",
        "idRole": [
            1,
            2,
            3
        ]
    },
    {
        "txt": "contact",
        "idRole": null
    }
]

import React, { Component } from 'react'
import Header from 'container/Header.js'
import Footer from './container/Footer'
import Login from './container/Login'
import menu from '../json-form-file/menu.json'

export default class App extends Component {
    constructor (props) {
        super(props)
        this.state = {
            isMenuOpen: false,
            isLoggedIn: false,
            menu: null,
            page: null,
            user: null
        }
        this.toggleMenu = this.toggleMenu.bind(this)
        this.selectPage = this.selectPage.bind(this)
        this.login = this.login.bind(this)
        this.logout = this.logout.bind(this)
    }
    toggleMenu () {
        this.setState({ isMenuOpen: !this.state.isMenuOpen })
    }
    selectPage (event) {
        this.setState({ isMenuOpen: !this.state.isMenuOpen, page: event.target.textContent })
        const toggler = document.getElementsByClassName('toggler')[0]
        toggler.checked = !toggler.checked
    }
    login (event) {
        event.preventDefault()
        const requestBody = createLoginRequestBody(Array.from(event.target.parentElement.children))
        clearLoginFields(Array.from(event.target.parentElement.children))
        if (requestBody.username !== undefined && requestBody.pwd !== undefined) {
            fetch('www.someLoginUrl.login', {
                method: 'post',
                body: JSON.stringify(requestBody),
                headers: { 'Content-Type': 'application/json'
                }
            })
                .then(response => response.json())
                .then(response => this.setState({ user: response, isLoggedIn: true, page: null }))
        }
    }
    logout (event) {
        event.preventDefault()
        const toggler = document.getElementsByClassName('toggler')[0]
        toggler.checked = !toggler.checked
        this.setState({ user: null, isLoggedIn: false, page: null, isMenuOpen: !this.state.isMenuOpen })
    }
    componentDidMount () {
        console.log('im mounting')
        const newMenu = this.refreshMenuSelection(menu)
        this.setState({ menu: newMenu })
    }
    refreshMenuSelection (list) {
        const newMenu = []
        list.map((item) => {
            if (item.txt === 'login' && this.state.isLoggedIn === false) newMenu.push(item)
            if (item.txt === 'logout' && this.state.isLoggedIn === true) newMenu.push(item)
            if (item.idRole === null && item.txt !== 'login' && item.txt !== 'logout') newMenu.push(item)
            if (this.state.user !== null && item.idRole.includes(this.state.user.id_role)) newMenu.push(item)
        })
        return newMenu
    }
    render () {
        return (
            <div>
                <Header
                    menu={this.state.menu}
                    toggleMenu={this.toggleMenu}
                    selectPage={this.selectPage}
                    logout={this.logout}
                    color={this.state.isMenuOpen ? secondaryColor : primaryColor} />
                {this.state.page === 'login' ? <Login login={this.login} /> : null}
                <Footer color={this.state.isMenuOpen ? secondaryColor : primaryColor} />
            </div>
        )
    }
}

const createLoginRequestBody = (inputs) => {
    const requestObject = {}
    inputs.map((input) => {
        if (input.id === 'username') Object.assign(requestObject, { username: input.value })
        if (input.id === 'pwd') Object.assign(requestObject, { pwd: input.value })
    })
    return requestObject
}