基于对象列表渲染 ReactJS 组件

IT技术 javascript json reactjs
2021-04-12 22:25:27

我有以下组件：

文章列表.jsx

import React from 'react';
import './articles_list.css';

export default class ArticlesList extends React.Component {

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

  componentWillMount() {
    fetch('/articles_all')
    .then(res => res.json())
    .then(json => {
      this.setState({
        articles: json.articles
      });
    });
  }

  render() {

    var teste = () => {
      if (this.state.articles === null) {
        return(<div>No articles</div>)
      } else {
          {this.state.articles.forEach( function(element, index) {
            console.log(element);
            return <div key={index}>{element.title}</div>;
          })}
      }
    }

    return(
      <div className="articles_list">
        <div className="articles_list_title">
          ARTICLES
        </div>
        <div>{teste()}</div>
      </div>
    );
  }
}

尽管 JSON 请求工作正常并返回一个包含五个 JSON 对象的数组，但它们只是不呈现！

我是 ReactJS 的新手，阅读（并观看）了很多教程，但似乎我遗漏了一些东西。

有什么建议？

2个回答

forEach 中的 return 语句不返回值，而是像一个continue语句一样，您需要使用 map

var teste = () => {
  if (this.state.articles === null) {
    return(<div>No articles</div>)
  } else {
      {this.state.articles.map( function(element, index) {
        console.log(element);
        return <div key={index}>{element.title}</div>;
      })}
  }
}

否则，如果您想使用 forEach，则需要修改代码，例如

render() {

    var teste = []

      if (this.state.articles === null) {
        teste.push(<div>No articles</div>)
      } else {
          {this.state.articles.forEach( function(element, index) {
            console.log(element);
            teste.push( <div key={index}>{element.title}</div>);
          })}
      }
    }

    return(
      <div className="articles_list">
        <div className="articles_list_title">
          ARTICLES
        </div>
        <div>{teste}</div>
      </div>
    );
  }
成功了，谢谢！但我仍然收到一个奇怪的警告：Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of ArticlesList.看起来很奇怪，因为我key={index}在 div 中使用过。
2021-05-28 22:25:27
我不想揣测你的好意，但你能看看这个吗？stackoverflow.com/questions/44382657/...
2021-06-08 22:25:27
在这种情况下，尽量给一个键<div>No articles</div>，以及
2021-06-09 22:25:27
谢谢！现在一切都很好！
2021-06-10 22:25:27
很高兴有帮助:)
2021-06-19 22:25:27

你可以尝试这样的事情。

import _ from 'lodash';
renderArticles() {
  return _.map(this.state.articles, article => {
    return (
      <li className="list-group-item" key={article.id}>
          {article.title}
      </li>
    );
  });
}


  render() {
    return (
      <div>
        <h3>Articles</h3>
        <ul className="list-group">
          {this.renderArticles()}
        </ul>
      </div>
    );
  }

映射列表并一一呈现。在这里，我使用 lodash map helper 来完成这项工作。希望这可以帮助。快乐编码。

实在没有理由使用_.map，只要你有Array.prototype.map
2021-06-15 22:25:27
其它你可能感兴趣的问题
上一篇Javascript ES6+：同时解构和使用数组方法？ 下一篇为什么 setState 没有设置将我的数组附加到状态？