Question

 render() {
    var NewsCards = this.state.news.map((b,i)=>{
        return(
            <div key={i} className="row">
                <div className="col-10">
                    <img src={b.image} className="img-fluid"/>
                </div>
            </div>
        )
    })
    return (
        <div className="container-fluid global-container-bottom-padding">
            {RenderIf(this.state.loading)(
            <div id="cssload-pgloading">
                <div className="cssload-loadingwrap">
                    <ul className="cssload-bokeh">
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
            </div>
            )}
            {RenderIf(!this.state.loading)(
                { NewsCards }
            )}
        </div>
    );
}

不太确定我在哪里出错了。

编辑：

this.state.news是一个对象数组

[
    {
        "image":"imgurl",
        "link":"imglink"
    },
    {
        "image":"imgurl",
        "link":"imglink"
    }
]

Answer 1

问题在于此处，因为您错误地使用object property shorthand syntax使用NewsCard字段创建了一个对象文字：

{RenderIf(!this.state.loading)(
  { NewsCards }
)}

请将您的代码更改为：

!this.state.loading && 
<div>
  {NewsCards}
</div>

或

{RenderIf(!this.state.loading)(
  <div>{NewsCards}</div>
)}

因为至少在React 16之前，还没有对片段的支持。

循环数组：ReactJS对象作为React子进程无效

1 个答案: