Cuando va a getDropDownOptions, aparece este error: se excedió la profundidad máxima de actualización. Esto puede suceder cuando un componente llama repetidamente a setState dentro de componentWillUpdate o componentDidUpdate. React limita la cantidad de actualizaciones anidadas para evitar bucles infinitos. No estoy usando ningún componenteWillUpdate o componenteDidUpdate, ni establezco ningún estado relacionado con esta funcionalidad. rowInfo son los elementos dentro de una matriz, que estoy mapeando. allProducts son los datos que obtengo de un componente principal.
return ( <SelectBox options={getDropdownOptions} value={{ label: '', value: '' }} onChange={e => onItemChange({ itemKey: headerItem.itemKey, arrayIndex: index, value: { label: e.value, value: e.value } }) } customClass="lineItemDropdown" /> ``` const getDropdownOptions = () => { const dropDownOptions = allProducts.find( product => product.productId === rowInfo.productId ).packages; return dropDownOptions; };En su ejemplo, está pasando una referencia a una función para options en lugar del valor que devuelve la función.
En este momento, si fuera a console.log(props.options) , vería una función... pero necesita una matriz.
Así que prueba esto:
<SelectBox options={getDropdownOptions()} ... />O, en lugar de usar una función, simplemente configure una variable:
const dropDownOptions = allProducts.find( product => product.productId === rowInfo.productId ).packages; return dropDownOptions; return ( <SelectBox options={dropDownOptions} ... /> )