Блог

Я пытаюсь добавить элемент в свой массив с помощью React useEffect , но этот процесс повторяется дважды, и я не могу понять почему, см. Мой код ниже:

 useEffect(() => {
    actionColumn()
}
,[])
  

Вот моя функция ActionColumn:

 const actionColumn = () => {

    columns.push(
        {
            dataField: 'actions',
            text: actionConfig.text,
            sort: false,
            formatter: (row, cell) => {
                return (
                    <UncontrolledDropdown>
                        <DropdownToggle tag="button" className="btn btn-link arrow-none card-drop p-0">
                            <i className="mdi mdi-dots-horizontal" style={{ fontSize: 25, color: "#6c757d" }}></i>
                        </DropdownToggle>
                        <DropdownMenu right>
                            {actionConfig.itens.map(e => {
                                return (<DropdownItem onClick={() => e.myEvent(cell)}><i className={e.icon}></i>{e.label}</DropdownItem>)
                            })}
                        </DropdownMenu>
                    </UncontrolledDropdown>
                )
            }
        })
}
  

И это мой неправильный результат:

#РЕДАКТИРОВАТЬ 1 Полный код компонента:

 const RelevoTable = ({
records,
columns,
hasPagination = true,
sorted, hasSearch = false,
exportCsv = false,
bordered = false,
hasToogle = false,
isCondensed = false,
actionConfig = null,
}) => {

useEffect(() => {
    if(actionConfig)
        actionColumn()
}
,[])



const actionColumn = () => {

    columns.push(
        {
            dataField: 'actions',
            text: actionConfig.text,
            sort: false,
            formatter: (row, cell) => {
                return (
                    <UncontrolledDropdown>
                        <DropdownToggle tag="button" className="btn btn-link arrow-none card-drop p-0">
                            <i className="mdi mdi-dots-horizontal" style={{ fontSize: 25, color: "#6c757d" }}></i>
                        </DropdownToggle>
                        <DropdownMenu right>
                            {actionConfig.itens.map(e => {
                                return (<DropdownItem onClick={() => e.myEvent(cell)}><i className={e.icon}></i>{e.label}</DropdownItem>)
                            })}
                        </DropdownMenu>
                    </UncontrolledDropdown>
                )
            }
        })
}


return (

    <>
        <Card>
            <CardBody>
                <ToolkitProvider
                    bootstrap4
                    keyField="id"
                    data={records}
                    columns={columns}
                    search={hasSearch}
                    exportCSV={{ onlyExportFiltered: true, exportAll: false }}
                    columnToggle={hasToogle}>
                    {props => (
                        <React.Fragment>
                            <Row>

                                {hasToogle ?
                                    <div>
                                        <CustomToggleList {...props.columnToggleProps} />
                                    </div> : null}

                                {hasSearch ?
                                    <Col>
                                        <SearchBar {...props.searchProps} />
                                    </Col> : null}

                                {exportCsv ?
                                    <Col className="text-right">
                                        <ExportCSVButton {...props.csvProps} className="btn btn-primary">
                                            Export CSV
                                            </ExportCSVButton>
                                    </Col> : null}

                            </Row>

                            <BootstrapTable
                                condensed={isCondensed}
                                {...props.baseProps}
                                bordered={bordered}
                                defaultSorted={sorted}
                                pagination={hasPagination ? paginationFactory(paginationOptions) : null}
                                wrapperClasses="table-responsive"
                            />
                        </React.Fragment>
                    )}
                </ToolkitProvider>
            </CardBody>
        </Card>
    </>
);
}
export default RelevoTable;
  

И здесь я вызываю компонент:

  render() {

    var actionConfig = {
        text: "My Actions",
        itens: [{icon: "mdi mdi-grill-outline", label: "teste", myEvent: this.alertAction},{icon: "mdi mdi-grill-outline", label: "teste", myEvent: this.alertAction}]
    }

    return (
        <>
            <RelevoTable
                hasPagination={true}
                records={records}
                columns={columns}
                sorted={[
                    {
                        dataField: 'id',
                        order: 'asc',
                    }
                ]}
                hasToogle={true}
                hasSearch={true}
                exportCsv={true}
                bordered={true}
                isCondensed={false}
                actionConfig={actionConfig}
            />            
        </>
    );
}