无法在React中渲染项目列表

Question

这是我的代码：

import React, { Component } from 'react';
import axios from 'axios';
import _ from 'lodash';

import Loader from './Loader';

export default class Main extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isLoading: true,
        cards: {}
    };

    axios.defaults.baseURL = 'API_URL';
    axios.defaults.headers.common['KEY'] = "VALUE";
    axios.get('/cards')
      .then((resp) => {
        this.setState({
          isLoading: false,
          cards: resp.data
        });
      });
  };

  renderCards() {
    _.forOwn(this.state.cards, function(value, key) {
      return value.map((card) => {
        return <li>card.name</li>
      });
    });
  };

  render() {
    if(this.state.isLoading) {
      return (
        <div className="wrapper">
          <Loader />
        </div>
      );
    };

    return (
      <div className="wrapper">
        {this.props.children}
          <ul className="cards-list">
            {this.renderCards()}
          </ul>
      </div>
    );
  };
};

通过this.renderCards()不会呈现任何内容。 我还尝试了return <li>{card.name}</li> ，甚至是一个简单的字符串，但没有任何反应（没有错误，DOM中没有任何内容）。

但是，如果我将return <li>card.name</li>更改为return console.log(card.name) ，则该方法将所有名称记录在控制台中。

我想念什么？

Answer 1

您必须return _.forOwn的结果。 另外，您的列表项必须用{}以获取值而不是纯字符串。

renderCards() {
    return _.forOwn(this.state.cards, function(value, key) {
      return value.map((card) => {
        return <li>{card.name}</li>
      });
    });
  };

希望这可以帮助。

编辑：结果_.forOwn返回唯一的初始对象。 因此正确的解决方案如下所示：

renderCards() {
    let list = [];
    _.forOwn(this.state.cards, function(value, key) {
      value.map((card) => {
        list.push(<li key={card.cardId}>{card.name}</li>);        
      });
    });
    return list;
  };