Question

我目前正在使用来自API的JSON文件，如果该字段为null，则不会添加密钥对。在尝试遍历整个JSON文件时，这让我感到悲痛。

我的代码目前是

var ListOfItems = React.createClass({
    render: function () {
        var itemList = jsonFile.data.map(function(item)
        {
            return <Item key={item.__key}
                itemQuestion={item.question}
                itemQuestionAnswer={item.answer.answer}
                userName={item.user.name}
                staffName={item.staff.name}
                staffImage={item.staff.image_url} />
        });

        return (
            <div>
            <ul>{itemList}</ul>
            </div>
        );
    }
});

当item.answer.answer没有值时会出错。

非常感谢任何帮助。

Answer 1

您可以通过添加条件来检查项目的答案类型是否不是undefined。如果不是，请继续返回值，否则不要返回任何内容。这样，如果条件已经过去，你只会附加另一个项目（我使用了条件的简写）。

var ListOfItems = React.createClass({
    render: function() {
        var itemList = jsonFile.data.map(function(item)
        {
            typoeof item.answer != 'undefined' && 
            return <Item  key={item.__key} itemQuestion={item.question}
                itemQuestionAnswer={item.answer.answer} userName={item.user.name}
                staffName={item.staff.name} staffImage={item.staff.image_url} />
        });

        return (
            <div>
                <ul>{itemList}</ul>
            </div>
        );
    }
});

如果您始终获得item.answer但answer undefined或null，则可以在代码I＆中检查item.answer.answer ＃39; ve代替了。

Answer 2

根据您的商品列表的大小，您可以使用builtin filter Array method首先删除您不想要的所有商品，然后继续浏览它们。请记住，这可能会两次遍历整个列表。

关于从undefined内部返回map的说明。这将不阻止项目返回。您将在结果数组中添加undefined项。该数组将不更短。

以下是filter()的示例：

var ListOfItems = React.createClass({
  renderItems: function() {
    return jsonFile.data
      .filter(function(item) {
        // This will return any item that has a truthy answer
        return item.answer && item.answer.answer;
      })
      .map(function(item) {
        return (
          <Item
            key={item.__key}
            itemQuestion={item.question}
            itemQuestionAnswer={item.answer.answer}
            userName={item.user.name}
            staffName={item.staff.name}
            staffImage={item.staff.image_url} />
        );
      });
  },

  render: function() {
    return (
      <div>
        <ul>
          {this.renderItems()}
        </ul>
      </div>
    );
  }
});

如果JSON字段不存在，则跳过JSX

2 个答案: