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

Question

我目前正在使用来自 API 的 JSON 文件，如果该字段为空，则该文件不会添加密钥对。当我试图遍历整个 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。如果不是，请继续 returning 一个值，否则不要 return 任何东西。这样，如果条件已通过，您只需附加另一个项目（我使用 shorthand 作为条件）。

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，你可以在我的代码中检查 item.answer.answer而是提供。

Answer 2

根据您的项目列表有多大，您可以使用 builtin filter Array method 首先删除所有不需要的项目，然后继续映射它们。请记住，这可能会遍历整个列表两次。

关于从 map 内部返回 undefined 的注意事项。这将不会阻止物品被退回。您将在结果数组中有一个 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 跳过

JSX skip if JSON field does not exist

javascript

jsx

reactjs

react-jsx