javascript - 无法在 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

您必须返回_.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;
  };