ReactJs - 网格数据数组

Question

我正在使用 React 开发我的第一个网站，我想知道如何从 json 数组创建 Instagram 之类的东西？我的意思是使用网格系统

<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>
    }
}

Nothing yet

存在，但是未显示文章，我看到此错误:

Uncaught (in promise) Error: ArticlesView.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.

at invariant (bundle.js:8823)

at ReactCompositeComponentWrapper._renderValidatedComponent (bundle.js:15416)

at ReactCompositeComponentWrapper.wrapper [as _renderValidatedComponent] (bundle.js:9141)

at ReactCompositeComponentWrapper._updateRenderedComponent (bundle.js:15363)

at ReactCompositeComponentWrapper._performComponentUpdate (bundle.js:15347)

at ReactCompositeComponentWrapper.updateComponent (bundle.js:15276)

at ReactCompositeComponentWrapper.wrapper [as updateComponent] (bundle.js:9141)

at 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>
}