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

无法在React中呈现项目列表

1 个答案: