Objects are not valid as a React child (found: TypeError: response[0].includes is not a function). REACT

Всем привет. Создаю страничку на React. Смысл работы примерно таков : пользователь заходит, выбирает из первой таблицы типы аккаунтов-> нажимает на кнопку поиска аккаунтов и ему выпадает другая таблица и он дальше выбирает колонки из этой таблицей и происходит перемещение каких-то свойств. У меня все работает. Однако в Console вываливается следующие ошибки (1-2), в момент когда я нажимаю на кнопку поиска аккаунтов.

1)Uncaught Error: Objects are not valid as a React child (found: TypeError: Cannot read property 'includes' of undefined). If you meant to render a collection of children, use an array instead.

2)The above error occurred in the component:

My Code:

import React, { useState } from 'react';
import { Spin, Select, Button, Form, notification, Checkbox, Typography } from 'antd';
import PropTypes from 'prop-types';
import { useFetch, usePromise } from 'common.ui';
import * as apiService from 'services/ApiService';
import AccountTypesV2 from 'components/AccountTypesV2';
import AccountsV2 from 'components/AccountsV2';
import { LAYOUT, TAIL_LAYOUT } from 'constants/layouts';
import { useQueryParams } from 'hooks/useQueryParams';
import styles from './MovePropertyV2.scss';

const MovePropertyV2 = () => {
  const [clientID, propertyID] = useQueryParams();
  const onFail = (error) => notification.error({ message: error });
  const onSuccess = (response) => {
    if (response[0].includes('Exception')) {
      notification.error({ message: response });
    } else {
      notification.success({ message: response });
    }
  };

  const [{ isLoading: IsMoveProperty }, moveProperty] = usePromise(apiService.moveProperty, { onFail, onSuccess });
  const [clients, isClientLoading] = useFetch(apiService.getAllActiveClents);
  const [{ data: accounts, isLoading }, fetchAccounts] = usePromise(
    apiService.getAccountsByAccountTypes, { onFail, onSuccess }
  );

  const [selectedAccountTypes, setSelectedItems] = useState([]);
  const [selectedAccountsToMove, setSelectedAccountsToMove] = useState([]);
  const [destinationClient, setDestinationClient] = useState();
  const [existingSources, setExistingSources] = useState(false);
  const [existingMerchantAccounts, setExistingMerchantAccounts] = useState(false);

  const handleMoveAccount = () => {
    const request = {
      sourceClientId: clientID,
      propertyId: propertyID,
      destinationClientId: destinationClient,
      useExistingSources: existingSources,
      useExistingMerchantAccounts: existingMerchantAccounts,
      accountIds: selectedAccountsToMove.accountId,
    };
    console.log(clientID, propertyID, destinationClient);
    console.log(selectedAccountsToMove);
    moveProperty(request);
  };

  // console.log(clientId, selectedAccountTypes);
  const accountSearch = () => {
    const requestData = {
      clientId: parseInt(clientID, 10),
      accountTypes: selectedAccountTypes,
    };
    fetchAccounts(requestData);
  };

  return (
    <Spin spinning={IsMoveProperty}>
      <Typography.Title>Move Property</Typography.Title>
      <Form {...LAYOUT} onFinish={IsMoveProperty}>
        <Form.Item {...TAIL_LAYOUT}>
          <Select
            placeholder="Destination Client Name"
            onChange={setDestinationClient}
            loading={isClientLoading}
          >
            {clients.map((client) => (
              <Select.Option key={client.id} value={client.id}>
                {client.name}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item {...TAIL_LAYOUT}>
          <Checkbox onChange={setExistingSources}>Use existing Source</Checkbox>
        </Form.Item>
        <Form.Item {...TAIL_LAYOUT}>
          <Checkbox onChange={setExistingMerchantAccounts}>Use existing merchant accounts</Checkbox>
        </Form.Item>
        <Form.Item {...TAIL_LAYOUT}>
          <AccountTypesV2 onSelectingItems={setSelectedItems} />
        </Form.Item>
        <Form.Item {...TAIL_LAYOUT}>
          <Button htmlType="submit" onClick={accountSearch} className={styles.submitButton}>Search Account</Button>
        </Form.Item>
        <Form.Item {...TAIL_LAYOUT}>
          <Spin spinning={isLoading}>
            {accounts
          && <AccountsV2 accounts={accounts} onSelectingAccountsItems={setSelectedAccountsToMove} />}
          </Spin>
        </Form.Item>
        <Form.Item {...TAIL_LAYOUT}>
          <Button htmlType="submit" onClick={handleMoveAccount} className={styles.submitButton}>Move Property</Button>
        </Form.Item>
      </Form>
    </Spin>
  );
};

MovePropertyV2.propTypes = {
  accountId: PropTypes.arrayOf(PropTypes.shape({})),
  onSelectingItems: PropTypes.func,
};

MovePropertyV2.defaultProps = {
  accountId: [],
  onSelectingItems: () => { },
};

export default MovePropertyV2;

My Code AccountsTypeV2

import React from 'react';
import { Table, Spin } from 'antd';
import PropTypes from 'prop-types';
import { useFetch } from 'innroad.common.ui';
import * as apiService from 'services/ApiService';

const AccountTypesV2 = ({ onSelectingItems }) => {
  const [data, isLoading] = useFetch(apiService.getAccountTypes);

  return (
    <Spin spinning={isLoading}>
      <Table
        key="id"
        bordered="true"
        rowKey="id"
        dataSource={data}
        rowSelection={{ onChange: onSelectingItems }}
        pagination={false}
      >
        <Table.Column title="Account Type" dataIndex="name" />
      </Table>
    </Spin>
  );
};

AccountTypesV2.propTypes = {
  onSelectingItems: PropTypes.func,
};

AccountTypesV2.defaultProps = {
  onSelectingItems: () => { },
};

export default AccountTypesV2;

My Code AccountsV2

import React from 'react';
import { Table } from 'antd';
import PropTypes from 'prop-types';

const AccountsV2 = ({ accounts, onSelectingAccountsItems }) => (
  <Table
    key="id"
    bordered="true"
    rowKey="id"
    dataSource={accounts}
    rowSelection={{ onChange: onSelectingAccountsItems }}
    pagination={false}
  >
    <Table.Column title="Account Type" dataIndex="accountTypeName" />
    <Table.Column title="Account Number" dataIndex="accountNumber" />
    <Table.Column title="Account ID" dataIndex="id" />
    <Table.Column title="Account Name" dataIndex="name" />
  </Table>
);

AccountsV2.propTypes = {
  accounts: PropTypes.arrayOf(PropTypes.shape({})),
  onSelectingAccountsItems: PropTypes.func,
};

AccountsV2.defaultProps = {
  accounts: [],
  onSelectingAccountsItems: () => { },
};

export default AccountsV2;

Вторая таблица успешно появляется, но я не понимаю, почему у меня эти две ошибки.

Буду рад любому совету, спасибо.


Ответы (0 шт):