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;
Вторая таблица успешно появляется, но я не понимаю, почему у меня эти две ошибки.
Буду рад любому совету, спасибо.