Блог

У меня есть компонент таблицы в приложении react, как показано ниже, но я не могу отобразить этот компонент таблицы и разрывы страниц.

 const rows = data.map((rowInfo, index) =gt; {  // const options = packageSupportDropdowns(confEntries, rowInfo.productId);  if (!rowInfo.hide amp;amp; !rowInfo.isNotEditable) {  dataAvailable = true;  return (  lt;tr key={`keytr-${index}`} className={customClass}gt;  {headerList.map((headerItem, headerItemIndex) =gt; (  lt;td  key={`keytd-${headerItemIndex}`}  style={{ width: `${headerItem.width}` }}  gt;  {getItemBasedOnType(  headerItem,  index,  rowInfo,  onItemChange,  REGEX_CONSTANTS.notNumRegExp,  discountInputRegex,  confEntries,  packageSupportDropdowns  )}  {headerItem.itemKey === 'productDescription' amp;amp;  get(rowInfo, 'transitionStateMessage', '') amp;amp; (  lt;div className="line-item-details-request-discount-ops"gt;  lt;p className="line-item-warning-request-discount"gt;  lt;img src={warningIcon} alt="warning" /gt;{' '}  {get(rowInfo, 'transitionStateMessage', '')}  lt;/pgt;  lt;/divgt;  )}  lt;/tdgt;  ))}  lt;/trgt;  );  }  return null;  });  

Ниже приведены функции, используемые для отображения элемента во внутренней таблице.

 const getItemBasedOnType = (  headerItem,  index,  rowInfo,  onItemChange,  regex,  discountInputRegex,  confEntries,  packageSupportDropdowns ) =gt; {  if (headerItem.isNumber) {  return (  lt;divgt;  lt;TextBox  type="number"  name="number-field"  customClass="modern"  value={rowInfo[headerItem.itemKey]}  placeholder={headerItem.label}  max={headerItem.max || Infinity}  onChange={e =gt; {  // eslint-disable-next-line no-restricted-globals  if (!isNaN(e.target.value)) {  onItemChange({  itemKey: headerItem.itemKey,  arrayIndex: index,  value: e.target.value.trim()  });  }  }}  regex={regex}  discountInputRegex={discountInputRegex}  neglectMinMaxCheck={!!discountInputRegex}  /gt;  {!isEmpty(discountInputRegex) amp;amp; (  lt;div className="discounts-error-message"gt;  {validatePercentageInputWithDecimals(rowInfo[headerItem.itemKey])}  lt;/divgt;  )}  lt;/divgt;  );  } else if (headerItem.isCheckBox) {  return (  lt;Checkbox  id={uuid4()}  checked={rowInfo[headerItem.itemKey]}  onChange={e =gt;  onItemChange({  itemKey: headerItem.itemKey,  arrayIndex: index,  value: e.target.checked  })  }  /gt;  );  } else if (headerItem.isDropdown) {  return (  lt;SelectBox  options={packageSupportDropdowns(confEntries, rowInfo.productId)}  value={{ label: '', value: '' }}  onChange={e =gt;  onItemChange({  itemKey: headerItem.itemKey,  arrayIndex: index,  value: { label: e.value, value: e.value }  })  }  customClass="lineItemDropdown"  /gt;  );  }  

и

 const packageSupportDropdowns = (packages, product) =gt; {  const packageDropdowns = [];  packages.forEach(conf =gt; {  const products = conf.products || [];  products.forEach(prod =gt; {  if (prod.productId === product) {  packageDropdowns.push({  label: prod.packageId,  value: prod.packageName  });  }  });  });  return packageDropdowns;  };  

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

 Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.  at checkForNestedUpdates (vendors.bundle.js:115594)  

заранее спасибо.