Блог

Я столкнулся с этой проблемой при отправке формы. Я хочу взять входные данные из формы и отобразить их в списке. Я получаю ошибку, которая является ошибкой: Объекты недопустимы в качестве дочернего элемента React (найдено: Ошибка: Сетевая ошибка). Если вы хотели отобразить коллекцию дочерних элементов, вместо этого используйте массив.

это форма добавления пользователя

 import { Row, Col, Form, Input, Select, DatePicker, Radio, InputNumber, Upload, Spin } from 'antd'; import { Link } from 'react-router-dom'; import { useSelector, useDispatch } from 'react-redux'; import FeatherIcon from 'feather-icons-react'; import { RecordFormWrapper } from './Style'; import { PageHeader } from '../../../components/page-headers/page-headers'; import { Cards } from '../../../components/cards/frame/cards-frame'; import { Button } from '../../../components/buttons/buttons'; import { Main, BasicFormWrapper } from '../../styled'; import { usernewDataSubmit } from '../../../redux/crud/usernew/actionCreator'; // import Heading from '../../../components/heading/heading';  const { Option } = Select; const dateFormat = 'YYYY/MM/DD';  const AddNew = () =gt; {  const dispatch = useDispatch();  const { isLoading, } = useSelector(state =gt; {  return {  isLoading: state.UserNewCrud.loading,  };  });   const [form] = Form.useForm();   const [state, setState] = useState({  join: '',  dob: '',  });   const handleSubmit = values =gt; {  dispatch(  usernewDataSubmit({  ...values,  join: state.join,  dob: state.dob,  id: new Date().getTime(),  }),  );  form.resetFields();  dispatch(usernewFileClear());  };   const onChange = (date, dateString) =gt; {  setState({ join: dateString });  };   // const props = {  // name: 'file',  // action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',  // multiple: false,  // showUploadList: false,  // headers: {  // authorization: 'authorization-text',  // },  // onChange(info) {  // if (info.file.status !== 'uploading') {  // dispatch(usernewFileUploder(info.file.originFileObj));  // }  // if (info.file.status === 'done') {  // // message.success(`${info.file.name} file uploaded successfully`);  // } else if (info.file.status === 'error') {  // // message.error(`${info.file.name} file upload failed.`);  // }  // },  // };   return (  lt;gt;  lt;PageHeader  // buttons={[  // lt;Button className="btn-add_new" size="default" key="1" type="primary"gt;  // lt;Link to="/admin/crud/usernew-view"gt;View Alllt;/Linkgt;  // lt;/Buttongt;,  // ]}  ghost  title="Add New User"  /gt;  lt;Maingt;  lt;Row gutter={15}gt;  lt;Col xs={24}gt;  lt;Form name="sDash_validation-form" form={form} layout="vertical" onFinish={handleSubmit}gt;  lt;Row gutter={30}gt;  lt;Col md={12} xs={24}gt;  lt;Form.Item name="name" label="Full Name"gt;  lt;Input placeholder="Enter you full Name" /gt;  lt;/Form.Itemgt;  lt;/Colgt;  lt;Col md={12} xs={24}gt;  lt;Form.Item name="email" rules={[{ type: 'email' }]} label="Email Address"gt;  lt;Input placeholder="name@example.com" /gt;  lt;/Form.Itemgt;  lt;/Colgt;  lt;Col md={12} xs={24}gt;  lt;Form.Item name="phone" label="Phone Number"gt;  lt;InputNumber type="number" placeholder=" 44 2546 5236" style={{ width: '100%' }} /gt;  lt;/Form.Itemgt;  lt;/Colgt;   lt;Col md={12} xs={24}gt;  lt;Form.Item name="address" label="Full Address"gt;  lt;Input placeholder="Enter your complete address" /gt;  lt;/Form.Itemgt;  lt;/Colgt;   lt;Col md={12} xs={24}gt;  lt;Form.Item name="postal_code" label="Postal/Zip/Pin Code"gt;  lt;InputNumber type="number" placeholder="160071" style={{ width: '100%' }} /gt;  lt;/Form.Itemgt;  lt;/Colgt;  lt;Col md={12} xs={24}gt;  lt;Form.Item name="country" initialValue="" label="Country"gt;  lt;Select style={{ width: '100%' }}gt;  lt;Option value=""gt;Please Selectlt;/Optiongt;  lt;Option value="russia"gt;Russialt;/Optiongt;  lt;Option value="india"gt;Indialt;/Optiongt;  lt;Option value="uk"gt;United Kingdomlt;/Optiongt;  lt;Option value="usa"gt;United Stateslt;/Optiongt;  lt;/Selectgt;  lt;/Form.Itemgt;  lt;/Colgt;  lt;Col md={8} xs={24}gt;  lt;Form.Item name="state" label="State"gt;  lt;Input placeholder="Enter state Name" /gt;  lt;/Form.Itemgt;  lt;/Colgt;  lt;Col md={8} xs={24}gt;  lt;Form.Item name="city" label="City"gt;  lt;Input placeholder="Enter city name" /gt;  lt;/Form.Itemgt;  lt;/Colgt;   lt;Col md={8} xs={24}gt;  lt;Form.Item rules={[{ type: 'object', whitespace: true }]} label="Date of Birth"gt;  lt;DatePicker onChange={onChange} format={dateFormat} style={{ width: '100%', padding: '12px' }} /gt;  lt;/Form.Itemgt;  lt;/Colgt;  lt;Col md={8} xs={24}gt;  lt;Form.Item rules={[{ type: 'object', whitespace: true }]} label="Joining Date"gt;  lt;DatePicker onChange={onChange} format={dateFormat} style={{ width: '100%', padding: '12px' }} /gt;  lt;/Form.Itemgt;  lt;/Colgt;   lt;Col md={8} xs={24}gt;  lt;Form.Item name="gender" initialValue="" label="Gender"gt;  lt;Radio.Groupgt;  lt;Radio value="male"gt;Malelt;/Radiogt;  lt;Radio value="female"gt;Femalelt;/Radiogt;  lt;Radio value="others"gt;Otherslt;/Radiogt;  lt;/Radio.Groupgt;  lt;/Form.Itemgt;  lt;/Colgt;  lt;Col md={8} xs={24}gt;  lt;Form.Item name="status" initialValue="" label="Status"gt;  lt;Radio.Groupgt;  lt;Radio value="active"gt;Activelt;/Radiogt;  lt;Radio value="inactive"gt;Inactivelt;/Radiogt;  lt;/Radio.Groupgt;  lt;/Form.Itemgt;  lt;/Colgt;  {/* lt;Col md={8} xs={24}gt;  lt;Form.Item name="address_type" initialValue="active" label="Address type"gt;  lt;Radio.Groupgt;  lt;Radio value="home"gt;Homelt;/Radiogt;  lt;Radio value="work"gt;Worklt;/Radiogt;  lt;Radio value="other"gt;Otherlt;/Radiogt;  lt;/Radio.Groupgt;  lt;/Form.Itemgt;  lt;/Colgt; */}  lt;/Rowgt;  lt;Form.Itemgt;  lt;div className="add-user-bottom text-right"gt;  lt;Button  className="ant-btn ant-btn-primary"  type="danger"  onClick={() =gt; {  return form.resetFields();  }}  gt;  Reset  lt;/Buttongt;    lt;Button htmlType="Save" type="primary"gt;  {isLoading ? 'Loading...' : 'Submit'}  lt;/Buttongt;  lt;/divgt;  lt;/Form.Itemgt;   {/* lt;div className="sDash_form-action mt-20"gt;  lt;Button htmlType="submit" type="primary" size="large"gt;  Submit Form  lt;/Buttongt;   lt;/divgt;*/}  lt;/Formgt;     {/* lt;RecordFormWrappergt;  lt;Cards headlessgt;  lt;Row justify="center"gt;  lt;Col xl={10} md={16} xs={24}gt;  lt;BasicFormWrappergt;  lt;Form  className="add-record-form"  style={{ width: '100%' }}  layout="vertical"  form={form}  name="addnew"  onFinish={handleSubmit}  gt;  lt;figure className="pro-image align-center-v"gt;  lt;img  src={  url === null  ? require('../../../static/img/avatar/profileImage.png')  : `https://demo.jsnorm.com/laravel/strikingdash/${url}`  }  alt=""  /gt;  lt;figcaptiongt;  lt;Upload {...props}gt;  lt;Link className="upload-btn" to="#"gt;  lt;FeatherIcon icon="camera" size={16} /gt;  lt;/Linkgt;  lt;/Uploadgt;  lt;div className="info"gt;  lt;Heading as="h4"gt;Profile Photolt;/Headinggt;  lt;/divgt;  {isFileLoading amp;amp; (  lt;div className="isUploadSpain"gt;  lt;Spin /gt;  lt;/divgt;  )}  lt;/figcaptiongt;  lt;/figuregt;  lt;Form.Item name="name" label="Name"gt;  lt;Input placeholder="Input Name" /gt;  lt;/Form.Itemgt;  lt;Form.Item name="email" rules={[{ type: 'email' }]} label="Email"gt;  lt;Input placeholder="example@gmail.com" /gt;  lt;/Form.Itemgt;  lt;Form.Item name="country" initialValue="" label="Country"gt;  lt;Select style={{ width: '100%' }}gt;  lt;Option value=""gt;Please Selectlt;/Optiongt;  lt;Option value="bangladesh"gt;Bangladeshlt;/Optiongt;  lt;Option value="india"gt;Indialt;/Optiongt;  lt;Option value="pakistan"gt;Pakistanlt;/Optiongt;  lt;Option value="srilanka"gt;Srilankalt;/Optiongt;  lt;/Selectgt;  lt;/Form.Itemgt;  lt;Form.Item name="city" initialValue="" label="City"gt;  lt;Select style={{ width: '100%' }}gt;  lt;Option value=""gt;Please Selectlt;/Optiongt;  lt;Option value="dhaka"gt;Dhakalt;/Optiongt;  lt;Option value="mymensingh"gt;Mymensinghlt;/Optiongt;  lt;Option value="khulna"gt;Khulnalt;/Optiongt;  lt;Option value="barisal"gt;Barisallt;/Optiongt;  lt;/Selectgt;  lt;/Form.Itemgt;  lt;Form.Item name="company" label="Company"gt;  lt;Input placeholder="Company Name" /gt;  lt;/Form.Itemgt;  lt;Form.Item name="position" label="Position"gt;  lt;Input placeholder="Position" /gt;  lt;/Form.Itemgt;  lt;Form.Item label="Joining Date"gt;  lt;DatePicker onChange={onChange} style={{ width: '100%' }} format={dateFormat} /gt;  lt;/Form.Itemgt;  lt;Form.Item name="status" label="Status"gt;  lt;Radio.Groupgt;  lt;Radio value="active"gt;Activelt;/Radiogt;  lt;Radio value="deactivated"gt;Deactivatedlt;/Radiogt;  lt;Radio value="blocked"gt;Blockedlt;/Radiogt;  lt;/Radio.Groupgt;  lt;/Form.Itemgt;  lt;div className="record-form-actions text-right"gt;  lt;Button size="default" htmlType="Save" type="primary"gt;  {isLoading ? 'Loading...' : 'Submit'}  lt;/Buttongt;  lt;/divgt;  lt;/Formgt;  lt;/BasicFormWrappergt;  lt;/Colgt;  lt;/Rowgt;  lt;/Cardsgt;  lt;/RecordFormWrappergt; */}  lt;/Colgt;  lt;/Rowgt;  lt;/Maingt;  lt;/gt;  ); };  export default AddNew;   //This is actionCreator file  import { notification } from 'antd'; import actions from './actions'; import { DataService } from '../../../config/dataService/dataService';  const addNotificationSuccess = () =gt; {  notification.success({  message: 'Your Record has been Submited',  }); };  const addNotificationError = err =gt; {  notification.error({  message: err,  }); };  const deleteNotificationSuccess = () =gt; {  notification.success({  message: 'Your Record has been Deleted',  }); };  const deleteNotificationError = err =gt; {  notification.error({  message: err,  }); };  const updateNotificationSuccess = () =gt; {  notification.success({  message: 'Your Record has been updated',  }); };  const updateNotificationError = err =gt; {  notification.error({  message: err,  }); };  const {  usernewAddBegin,  usernewAddSuccess,  usernewAddErr,   usernewReadBegin,  usernewReadSuccess,  usernewReadErr,   usernewUpdateBegin,  usernewUpdateSuccess,  usernewUpdateErr,   usernewDeleteBegin,  usernewDeleteSuccess,  usernewDeleteErr,   usernewSingleDataBegin,  usernewSingleDataSuccess,  usernewSingleDataErr, } = actions;  const usernewDataSubmit = data =gt; {  return async dispatch =gt; {  try {  await dispatch(usernewAddBegin());  const response = await DataService.post('/create', data);  await dispatch(usernewAddSuccess(response.data.data));  await addNotificationSuccess();  } catch (err) {  await dispatch(usernewAddErr(err));  await addNotificationError(err);  }  }; };  const usernewDataRead = () =gt; {  return async dispatch =gt; {  try {  await dispatch(usernewReadBegin());  const query = await DataService.get('/view-all');  await dispatch(usernewReadSuccess(query.data.data));  } catch (err) {  await dispatch(usernewReadErr(err));  }  }; };  const usernewCrudGetData = () =gt; {  return async dispatch =gt; {  try {  await dispatch(usernewReadBegin());  const query = await DataService.get('/view-all');  await dispatch(usernewReadSuccess(query.data.data));  } catch (err) {  await dispatch(usernewReadErr(err));  }  }; };  const usernewDataSearch = searchItem =gt; {  return async dispatch =gt; {  try {  await dispatch(usernewReadBegin());  if (searchItem !== '') {  const query = await DataService.get(`/search/${searchItem}`);  await dispatch(usernewReadSuccess(query.data.data));  } else {  try {  const query = await DataService.get('/view-all');  await dispatch(usernewReadSuccess(query.data.data));  } catch (err) {  await dispatch(usernewReadErr(err));  }  }  } catch (err) {  await dispatch(usernewReadErr(err));  }  }; };  const usernewDataUpdate = (id, data) =gt; {  return async dispatch =gt; {  try {  await dispatch(usernewUpdateBegin());  await DataService.post(`/update/${id}`, data);  await dispatch(usernewUpdateSuccess());  updateNotificationSuccess();  } catch (err) {  await dispatch(usernewUpdateErr(err));  updateNotificationError(err);  }  }; };  const usernewDataDelete = ({ id, getData }) =gt; {  return async dispatch =gt; {  try {  await dispatch(usernewDeleteBegin());  const data = await DataService.get(`/delete/${id}`);  await dispatch(usernewDeleteSuccess(data));  await getData();  deleteNotificationSuccess();  } catch (err) {  await dispatch(usernewDeleteErr(err));  deleteNotificationError(err);  }  }; };  const usernewDataSingle = id =gt; {  return async dispatch =gt; {  try {  await dispatch(usernewSingleDataBegin());  const query = await DataService.get(`/view/${id}`);  await dispatch(usernewSingleDataSuccess(query.data.data));  } catch (err) {  await dispatch(usernewSingleDataErr(err));  }  }; };   export {  usernewDataRead,  usernewDataSearch,  usernewDataSubmit,  usernewDataDelete,  usernewCrudGetData,  usernewDataSingle,  usernewDataUpdate, };  //Below is actions file.  const actions = {  USERNEW_ADD_BEGIN: 'USERNEW_ADD_BEGIN',  USERNEW_ADD_SUCCESS: 'USERNEW_ADD_SUCCESS',  USERNEW_ADD_ERR: 'USERNEW_ADD_ERR',   USERNEW_READ_BEGIN: 'USERNEW_READ_BEGIN',  USERNEW_READ_SUCCESS: 'USERNEW_READ_SUCCESS',  USERNEW_READ_ERR: 'USERNEW_READ_ERR',   USERNEW_UPDATE_BEGIN: 'USERNEW_UPDATE_BEGIN',  USERNEW_UPDATE_SUCCESS: 'USERNEW_UPDATE_SUCCESS',  USERNEW_UPDATE_ERR: 'USERNEW_UPDATE_ERR',   USERNEW_DELETE_BEGIN: 'USERNEW_DELETE_BEGIN',  USERNEW_DELETE_SUCCESS: 'USERNEW_DELETE_SUCCESS',  USERNEW_DELETE_ERR: 'USERNEW_DELETE_ERR',   USERNEW_SINGLE_DATA_BEGIN: 'USERNEW_SINGLE_DATA_BEGIN',  USERNEW_SINGLE_DATA_SUCCESS: 'USERNEW_SINGLE_DATA_SUCCESS',  USERNEW_SINGLE_DATA_ERR: 'USERNEW_SINGLE_DATA_ERR',   usernewAddBegin: () =gt; {  return {  type: actions.USERNEW_ADD_BEGIN,  };  },   usernewAddSuccess: data =gt; {  return {  type: actions.USERNEW_ADD_SUCCESS,  data,  };  },   usernewAddErr: err =gt; {  return {  type: actions.USERNEW_ADD_ERR,  err,  };  },   usernewReadBegin: () =gt; {  return {  type: actions.USERNEW_READ_BEGIN,  };  },   usernewReadSuccess: data =gt; {  return {  type: actions.USERNEW_READ_SUCCESS,  data,  };  },   usernewReadErr: err =gt; {  return {  type: actions.USERNEW_READ_ERR,  err,  };  },   usernewUpdateBegin: () =gt; {  return {  type: actions.USERNEW_UPDATE_BEGIN,  };  },   usernewUpdateSuccess: data =gt; {  return {  type: actions.USERNEW_UPDATE_SUCCESS,  data,  };  },   usernewUpdateErr: err =gt; {  return {  type: actions.USERNEW_UPDATE_ERR,  err,  };  },   usernewDeleteBegin: () =gt; {  return {  type: actions.USERNEW_DELETE_BEGIN,  };  },   usernewDeleteSuccess: data =gt; {  return {  type: actions.USERNEW_DELETE_SUCCESS,  data,  };  },   usernewDeleteErr: err =gt; {  return {  type: actions.USERNEW_DELETE_ERR,  err,  };  },   usernewSingleDataBegin: () =gt; {  return {  type: actions.USERNEW_SINGLE_DATA_BEGIN,  };  },   usernewSingleDataSuccess: data =gt; {  return {  type: actions.USERNEW_SINGLE_DATA_SUCCESS,  data,  };  },   usernewSingleDataErr: err =gt; {  return {  type: actions.USERNEW_SINGLE_DATA_ERR,  err,  };  }, };  export default actions;  //Below is reducers file  import actions from './actions';  const {  USERNEW_ADD_BEGIN,  USERNEW_ADD_SUCCESS,  USERNEW_ADD_ERR,   USERNEW_READ_BEGIN,  USERNEW_READ_SUCCESS,  USERNEW_READ_ERR,   USERNEW_UPDATE_BEGIN,  USERNEW_UPDATE_SUCCESS,  USERNEW_UPDATE_ERR,   USERNEW_DELETE_BEGIN,  USERNEW_DELETE_SUCCESS,  USERNEW_DELETE_ERR,   USERNEW_SINGLE_DATA_BEGIN,  USERNEW_SINGLE_DATA_SUCCESS,  USERNEW_SINGLE_DATA_ERR, } = actions;  const initialState = {  data: [],  loading: false,  error: null, };  const initialStateSingle = {  data: null,  loading: false,  error: null, };  const usernewCrudReducer = (state = initialState, action) =gt; {  const { type, data, err } = action;  switch (type) {   case USERNEW_ADD_BEGIN:  return {  ...state,  loading: true,  };   case USERNEW_ADD_SUCCESS:  return {  ...state,  data,  error: false,  loading: true,  };   case USERNEW_ADD_ERR:  return {  ...state,  error: err,  loading: false,  };   case USERNEW_READ_BEGIN:  return {  ...state,  loading: true,  };   case USERNEW_READ_SUCCESS:  return {  ...state,  data,  error: false,  loading: false,  };   case USERNEW_READ_ERR:  return {  ...state,  error: err,  loading: false,  };   case USERNEW_DELETE_BEGIN:  return {  ...state,  loading: true,  };   case USERNEW_DELETE_SUCCESS:  return {  ...state,  error: false,  data,  loading: false,  };   case USERNEW_DELETE_ERR:  return {  ...state,  error: err,  loading: false,  };   case USERNEW_UPDATE_BEGIN:  return {  ...state,  loading: true,  };   case USERNEW_UPDATE_SUCCESS:  return {  ...state,  error: false,  loading: false,  };   case USERNEW_UPDATE_ERR:  return {  ...state,  error: err,  loading: false,  };   default:  return state;  } };  const usernewSingleCrudReducer = (state = initialStateSingle, action) =gt; {  const { type, data, err } = action;  switch (type) {  case USERNEW_SINGLE_DATA_BEGIN:  return {  ...initialStateSingle,  loading: true,  };   case USERNEW_SINGLE_DATA_SUCCESS:  return {  ...initialStateSingle,  data,  error: false,  loading: false,  };   case USERNEW_SINGLE_DATA_ERR:  return {  ...initialStateSingle,  error: err,  loading: false,  };   default:  return state;  } };  export { usernewCrudReducer, usernewSingleCrudReducer };  // Below is dataService file  import axios from 'axios'; import { getItem } from '../../utility/localStorageControl';  const API_ENDPOINT = process.env.REACT_APP_API_ENDPOINT;  const authHeader = () =gt; ({  Authorization: `Bearer ${getItem('access_token')}`, });  const client = axios.create({  baseURL: API_ENDPOINT,  headers: {  Authorization: `Bearer ${getItem('access_token')}`,  'Content-Type': 'application/json',  }, });  class DataService {  static get(path = '') {  return client({  method: 'GET',  url: path,  headers: { ...authHeader() },  });  }   static post(path = '', data = {}, optionalHeader = {}) {  return client({  method: 'POST',  url: path,  data,  headers: { ...authHeader(), ...optionalHeader },  });  }   static patch(path = '', data = {}) {  return client({  method: 'PATCH',  url: path,  data: JSON.stringify(data),  headers: { ...authHeader() },  });  }   static delete(path = '', data = {}) {  return client({  method: 'DELETE',  url: path,  data: JSON.stringify(data),  headers: { ...authHeader() },  });  }   static put(path = '', data = {}) {  return client({  method: 'PUT',  url: path,  data: JSON.stringify(data),  headers: { ...authHeader() },  });  } }  /**  * axios interceptors runs before and after a request, letting the developer modify req,req more  * For more details on axios interceptor see https://github.com/axios/axios#interceptors  */ client.interceptors.request.use(config =gt; {  // do something before executing the request  // For example tag along the bearer access token to request header or set a cookie  const requestConfig = config;  const { headers } = config;  requestConfig.headers = { ...headers, Authorization: `Bearer ${getItem('access_token')}` };   return requestConfig; });  client.interceptors.response.use(  response =gt; response,  error =gt; {  /**  * Do something in case the response returns an error code [3**, 4**, 5**] etc  * For example, on token expiration retrieve a new access token, retry a failed request etc  */  const { response } = error;  const originalRequest = error.config;  if (response) {  if (response.status === 500) {  // do something here  } else {  return originalRequest;  }  }  return Promise.reject(error);  }, ); export { DataService };```