无法在 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 returns 是唯一的初始对象。所以正确的解决方案如下所示：

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

无法在 React 中呈现项目列表

Can't render list of items in React

javascript

render

reactjs