Javascript 在进入函数之前强制同步

我正在尝试映射包含img URL的字符串数组

但是我在路上查了一下日志才发现 当“图片”数组到达.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;

代码如下：

    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;

类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
图片sar:[]，
urlArr:[]，
所有权人：[]，
下一页：''，
上一页：“”
};
this.loadSubreddit=this.loadSubreddit.bind（this）；
}
loadSubreddit（subre）{
让图片=[]；
让URL=[]；
让标题=[]；
让nextpage=''；
让pageback=''；
reddit.hot（subre）.limit（5）.fetch（函数res）{
控制台日志（res）；
nextpage=res.data.after.toString（）；
//pageback=res.data.before.valueOf（）；
for（设i=0；i{
console.log（this.state）
});
控制台日志（图片）；
log（JSON.stringify（图片））；
}
组件willmount（）{
控制台日志（“组件正在安装”）；
这个。loadSubreddit（“猫”）；
}
render（）{
返回(
欢迎反应
);
}
}
导出默认应用程序；

当调用

映射时，数组是空的。检查
i
图标有什么指示。但是你确实得到了正确的渲染，对吗？当i“console.log（pic）；“它甚至不会显示，当i”console.log（picture）；”，映射函数完成后的空数组。我没有得到正确的渲染我已经创建了代码的模拟（没有组件
Col
，
ListGroup
和
ListGroupItem
），一切似乎都很好。@jony89
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;