TypeError: Невозможно прочитать свойство 'map' из null при привязке тегов к данным json, которые могут иметь значение null - PullRequest
Новая
       7

TypeError: Невозможно прочитать свойство 'map' из null при привязке тегов к данным json, которые могут иметь значение null

0 голосов
/ 28 февраля 2019

В моей базе данных есть некоторые записи, и не все из них имеют теги, некоторые могут быть пустыми, они хранятся в CosmosDb и возвращаются в виде массива Json.

Я использую таблицу и теги antd:https://ant.design/components/table/

Пример: теги

У меня есть следующий код: 

import React, { Component } from 'react';
import {  Table, Tag} from 'antd';
import { adalApiFetch } from '../../adalConfig';
import Notification from '../../components/notification';

class ListPageTemplatesWithSelection extends Component {

    constructor(props) {
        super(props);
        this.state = {
            data: []
        };
    }

    fetchData = () => {
        adalApiFetch(fetch, "/PageTemplates", {})
          .then(response => response.json())
          .then(responseJson => {
            if (!this.isCancelled) {
                const results= responseJson.map(row => ({
                    key: row.Id,
                    Name: row.Name,
                    SiteType: row.SiteType,
                    Tags: row.Tags
                  }))
              this.setState({ data: results });
            }
          })
          .catch(error => {
            console.error(error);
          });
      };


    componentDidMount(){
        this.fetchData();
    }

    render(){
        const columns = [
                {
                    title: 'Id',
                    dataIndex: 'key',
                    key: 'key',
                }, 
                {
                    title: 'Name',
                    dataIndex: 'Name',
                    key: 'Name',
                }, 
                {
                    title: 'Site Type',
                    dataIndex: 'SiteType',
                    key: 'SiteTy[e',
                },{
                  title: 'Tags',
                  key: 'Tags',
                  dataIndex: 'Tags',
                  render: Tags => (
                    <span>
                      {Tags.map(tag => {
                        let color = tag.length > 5 ? 'geekblue' : 'green';
                        if (tag === 'loser') {
                          color = 'volcano';
                        }
                        return <Tag color={color} key={tag}>{tag.toUpperCase()}</Tag>;
                      })}
                    </span>
                  ),
                }
        ];

        const rowSelection = {
            selectedRowKeys: this.props.selectedRows,
            onChange: (selectedRowKeys) => {
              this.props.onRowSelect(selectedRowKeys);
            }
          };


        return (
            <Table rowSelection={rowSelection}  columns={columns} dataSource={this.state.data} />
        );
    }
}

export default ListPageTemplatesWithSelection;

Однако у меня есть эта ошибка: 

 58 | dataIndex: 'Tags',
  59 | render: Tags => (
  60 |   <span>
> 61 |     {Tags.map(tag => {
  62 |       let color = tag.length > 5 ? 'geekblue' : 'green';
  63 |       if (tag === 'loser') {
  64 |         color = 'volcano';

ЯЯ не уверен, что это ошибка, потому что некоторые строки не имеют тегов, или ошибка по другой причине, в любом случае, не уверен, что я должен сделать, чтобы избежать этого.

Ответы [ 2 ]

0 голосов
/ 28 февраля 2019

вы можете попытаться проверить, существует тег или нет, прежде чем отобразить его 

render: Tags => (
    <span>
      { Tags ? Tags.map(tag => {
        let color = tag.length > 5 ? 'geekblue' : 'green';
        if (tag === 'loser') {
          color = 'volcano';
        }
        return <Tag color={color} key={tag}>{tag.toUpperCase()}</Tag>;
      })
      : ''}
    </span>
)
0 голосов
/ 28 февраля 2019

Если теги могут быть нулевыми, вы должны добавить проверку, чтобы не отображать ее для отображения 

<span>
  {Tags && Tags.map(tag => {
    let color = tag.length > 5 ? 'geekblue' : 'green';
    if (tag === 'loser') {
      color = 'volcano';
    }
    return <Tag color={color} key={tag}>{tag.toUpperCase()}</Tag>;
  })}
</span>
...