ReactJs - Grid的数据数组

Question

我正在开发我的第一个网站反应，我想知道我怎么能从json数组创建一个像Instagram的东西？我的意思是使用grid系统

<div class='col-lg-4'/> // by example

我有这个json：

[
    {
        "ID": 2,
        "Name": "Michael Jordan's Jersey",
        "Price": 70,
        "PictureURL": "http://nba.frgimages.com/FFImage/thumb.aspx?i=/productimages/_1098000/altimages/ff_1098879alt3_full.jpg&w=600"
    },
    {
        "ID": 3,
        "Name": "Paul Pogba's Jersey",
        "Price": 50,
        "PictureURL": "https://www.soccerpro.com/images/soccerpro/main/724615_439pog_nike_paul_pogba_france_home_jsy_01.jpg"
    }
]

这是从我的API返回，我想用Instagram风格的逻辑“逐个”地渲染这些项目，通过网格，类似的东西。

目前，我有：

constructor(props) {
  super(props);
  this.state = {
    articles_list: null
  }
}

componentWillMount() {
  fetch("http://127.0.0.1:8079/products")
  .then(results => {
    return results.json()
  }).then(json => {
    this.setState({
      articles_list: json
    });
  });
}

我应该把什么放在render()？

谢谢你的帮助！建议也是受欢迎的

编辑1：

然后我更新了我的代码：

export default class ArticlesView extends React.Component {

    constructor(props) {
      super(props);
      this.state = {
        type: props.type,
        articles_list: null
      }
    }

    componentWillMount() {
      fetch("http://127.0.0.1:8079/products")
      .then(results => {
        return results.json()
      }).then(json => {
        this.setState({
          articles_list: json
        });
      });
    }

    render() {

      if (this.state.articles_list) {     
        return this.state.articles_list.map(article => {
          return (
            <div className='col-lg-4' key={article.ID}>
              {article.Name} - {article.Price}
            </div>
          )
        })
      }
      // if this.state.articles_list is empty, show a loading spinner or whatever...
      return <div>Nothing yet</div>
    }
}

还没有

但是，文章没有显示，我看到这个错误：

未捕获（在promise中）错误：ArticlesView.render（）：必须返回有效的ReactComponent。您可能已返回undefined，数组或其他一些无效对象。

at invariant（bundle.js：8823）

在ReactCompositeComponentWrapper._renderValidatedComponent（bundle.js：15416）

在ReactCompositeComponentWrapper.wrapper [as _renderValidatedComponent]（bundle.js：9141）

在ReactCompositeComponentWrapper._updateRenderedComponent（bundle.js：15363）

在ReactCompositeComponentWrapper._performComponentUpdate（bundle.js：15347）

在ReactCompositeComponentWrapper.updateComponent（bundle.js：15276）

在ReactCompositeComponentWrapper.wrapper [as updateComponent]（bundle.js：9141）

在ReactCompositeComponentWrapper.performUpdateIfNecessary（bundle.js：15224）

at Object.performUpdateIfNecessary（bundle.js：13398）

at runBatchedUpdates（bundle.js：13980）

PS：我不知道如何使用控制台来了解问题所在..

Answer 1

你可以尝试这样的事情：

render() {
  const articles = this.state.articles_list.map(article => {
    return (
      <div className='col-lg-4' key={article.id}>
        {article.Name} - {article.Price}
      </div>
    )
  })

  return (
    <div>
      {articles}
    </div>
  )
}

对于你想要的，我认为解决方案更依赖于你的HTML和CSS。当你用完房间时，col-lg-4类应自动换行到下一行。

根据您更新的问题，您始终需要使用父级包装组件。例如，你不能return <div>Text</div><div>Text</div>。相反，你想要将这两个孩子包装在像这个return <Parent><div>Text</div><div>Text</div></Parent>这样的父组件中。以下是更新代码的方法：

render() {
  if (this.state.articles_list) {
    const articles = this.state.articles_list.map(article => {
      return (
        <div className='col-lg-4' key={article.ID}>
          {article.Name} - {article.Price}
        </div>
      )
    })  
    return <div>{articles}</div>
  }

  // if this.state.articles_list is empty, show a loading spinner or whatever...
  return <div>Nothing yet</div>
}

Answer 2

render（）将始终监听状态更改，因此您只需执行以下操作：

render() {
   if (this.state.articles_list) {
      return this.renderArticles() // add your own function to display the list
   }
   // if this.state.articles_list is empty, show a loading spinner or whatever...
   return this.loading()
}

希望能为您简化它。