React组件能够读取到数据，但是在页面显示的时候，总是显示musicListDetail.length为0 时的结果?

Question

组件的代码如下：

import React from 'react';

export default class SimpleListComponent extends React.Component{

    constructor(){
        super();
        this.state = {
            musicList: null,
            currentTitle:"",
            musicListDetail:[]
        }
    }

    componentWillMount(){
        var myFetchOptions = {
            method:"GET"
        }
        var list = null;
        console.log(this.props);
        fetch("http://localhost:3000/musicList?id=" + this.props.columnId, myFetchOptions)
        .then(response=>response.json())
        .then(json => {
            this.setState({musicList:json});

            this.state.musicList[0].details.map((item,index)=>{
                this.state.musicListDetail.push(item);
            });

            this.state.currentTitle = this.state.musicList[0].title;
        })
    }

    render(){
        const {musicListDetail}= this.state;
       
        const musicListContent = musicListDetail.length
        ?  
        this.state.musicListDetail.map((item,index)=>(
            <div key={index} className="m-list-item">
                <a>
                    <img src={item.src}/>
                </a>
                <div>{item.title}</div>
            </div>
        ))
        : 
        <h1 className="m-list-title">什么都没有</h1>;

        return(
            <div className="m-simple-list-wrapper">
                <h1 className="m-list-title">{this.state.currentTitle}</h1>
                <div className="m-simple-list">
                    {musicListContent}
                </div>
            </div>
        )
    }
}

查看的时候，右边的地方显示是获取到了数据的，但是在左边显示不出来。

componentWillMount()不是在render()之前执行的吗？那应该state中的musicListDetail能取到值了呀？
后来了解到fetch()获取数据的时候，页面也是在渲染中的，但是换成componentDidMount()也还是不行。

Answer 1

好吧，最后把读取数据部分写成了一个方法，在componentDidMount()和componentWillMount()里面都调用了才可以，只单独在其中一个里面调用都无法正常显示