Question

我有一个React组件，正在处理需要在各个子级别上遍历几个数组以在表中打印出联系方式的情况。

我需要迭代的两个部分是电话号码和地址，它们像这样嵌套：

// Add this in your mainwindows.h
public slots:
    void setGraphicViewColor(QColor c);

// This in the ctor of your MainWindow:
connect(ui->listView, SIGNAL(changeColor(QColor)), this, SLOT(setGraphicViewColor(QColor)));

// And the implementation of your custom slot in mainwindows.cpp
void MainWindow::setGraphicViewColor(QColor c)
{
    qDebug() << "Update your graphicsView backgroundBrush" << c;
    //ui->graphicsView->setBackgroundBrush(c);
}

在下面的函数中，我试图访问并遍历该部分，但是遇到了问题，因为当我对其进行遍历时，会收到错误消息“没有任何构造或调用签名”。

我认为这可能是因为我正在尝试在上一个中途运行另一个for循环，但是我不确定，而且我似乎也找不到解决该错误的方法来将所有信息打印到桌子

const contacts = {
  count: 1,
  groups: [
    {
      contactGroup: 'Family',
      count: 1,
      contacts: [
        {
          name: 'BENJAMIN BUTTON',
          email: 'ben@buttons.com',
          phoneNumbers: [
            {
              telephone: '(123) 456-7890',
              type: 'Work'
            },
            {
              telephone: '(999) 555-9999',
              type: 'Cell'
            }
          ],
          addresses: [
            {
              addressLine1: '123 FICTION ST',
              addressLine2: 'APT  1208',
              city: 'SAN DIEGO',
              state: 'CA',
              zipCode: '12345'
            },
            {
              addressLine1: '456 DREARY LN',
              addressLine2: '',
              city: 'SEATTLE',
              state: 'WA',
              zipCode: '67890'
            }
          ]
        }
      ]
    }
  ]
}

Answer 1

在JSX中，花括号中的内容必须是表达式-不能是语句（如您的for循环）。

计算表达式然后得出一个值。声明不要。

您可以将其表达为如下形式：

contacts.contactGroups[i].contacts[j].map(item => (<div>{item}</div>))

作为附带说明-这是我第一次在React代码中看到这样的循环，它们都只是在所有数组项上进行迭代。几乎总是使用map完成此操作，有时链接到filter。

尝试遍历嵌套数组的多个级别会不断得到“没有任何构造或调用签名”

1 个答案: