在进入函数之前强制同步

Question

我正在尝试映射包含img URL

的字符串数组

但是从我发现的方式检查日志 当'pictures'数组到达.map时，

即使我试图把它放在console.log（'test）它也不会工作 好像它不会进入这个功能。

    const ImageList = ({pictures}) => {
        console.log(pictures)
        let picture;
        picture = pictures.map((pic) => {
            console.log(pic);
            return ( <Col sm={6} md={4}>
                    <ListGroupItem><img src={pic} alt="test"/></ListGroupItem>
                </Col>
            )
        });
        console.log(picture);
        return (
            <ListGroup>
                {picture}
            </ListGroup>
        )
    };

    export default ImageList;

来自控制台的结果：

更新： 这是代码，@ Berg是正确的，当我做的时候

数组是空的，所以基本上它进入Image List为空， 如何在进入之前使其同步？

  console.log(JSON.stringify(pictures));

这是代码：

    class App extends Component {

        constructor(props){
            super(props);

            this.state = {
                picturesArr: [],
                urlArr: [],
                titleArr:[],
                nextPage:'',
                prevuisPage:''
            };

            this.loadSubreddit = this.loadSubreddit.bind(this);
        }

        loadSubreddit(subre){
            let pictures = [];
            let urls =[];
            let titles=[];
            let nextpage ='';
            let pageback='';
            reddit.hot(subre).limit(5).fetch(function(res) {
                console.log(res);
                nextpage = res.data.after.toString();
                // pageback = res.data.before.valueOf();
                for(let i =0; i<res.data.children.length; i++){
                    pictures.push(res.data.children[i].data.url);
                    urls.push(res.data.children[i].data.permalink);
                    titles.push(res.data.children[i].data.title);
                }});

            this.setState({
                picturesArr: pictures,
                urlArr: urls,
                titleArr: titles,
                nextPage: nextpage,
                prevuisPage: pageback
            }, () => {
                console.log(this.state)
            });
            console.log(pictures);
            console.log(JSON.stringify(pictures));

            }


        componentWillMount() {
            console.log('comp is mounting');
            this.loadSubreddit('cats');
        }

      render() {
            return (
            <div className="App">
            <div className="App-header">
              <img src={logo} className="App-logo" alt="logo" />
              <h2>Welcome to React</h2>
            </div>
                <Col sm={8} md={10} smOffset={2} mdOffset={1} >
                    <ImageList picturese={this.state.picturesArr} />
                </Col>
            </div>
        );
      }
    }

    export default App;