tengo un problema en mi aplicación cuando quiero añadir una compañía al sistema.
Cuando introduzco todos los campos pertinentes y le doy a guardar me saca el error del titulo (adjunto foto del error).
He buscado por internet para solucionar el error pero no lo he conseguido. He visto a personas que tenían el mismo error, pero la mayoría de las soluciones que daban no valían para mi caso, o eso me pareció. Algunas probé a implementarlas en mi caso pero seguía saliendo el error.
Adjunto también el código.
actions.js:
import * as actionTypes from './actionTypes';
import backend from '../../backend';
import * as selectors from './selectors';
const addedCompanyCompleted = companyId => ({
type: actionTypes.ADDED_COMPANY_COMPLETED,
companyId
});
export const addCompany = (name, capacity, reserve, homeSale, reservePercentage,
companyCategoryId,
onSuccess, onErrors) => dispatch =>
backend.companyService.addCompany(name, capacity, reserve, homeSale, reservePercentage, companyCategoryId,
({id}) => {
dispatch(addedCompanyCompleted(id));
onSuccess();
},
onErrors);
const findAllCompanyCategoriesCompleted = companyCategories => ({
type: actionTypes.FIND_ALL_COMPANY_CATEGORIES_COMPLETED,
companyCategories
});
export const findAllCompanyCategories = () => (dispatch, getState) => {
const companyCategories = selectors.getCompanyCategories(getState());
if (!companyCategories) {
backend.companyService.findAllCompanyCategories(
companyCategories => dispatch(findAllCompanyCategoriesCompleted(companyCategories))
);
}
}
AddCompany.js:
import React, {useState} from 'react';
import {useDispatch} from 'react-redux';
import {FormattedMessage} from 'react-intl';
import {useHistory} from 'react-router-dom';
import {Errors} from '../../common';
import * as actions from '../actions';
import CategorySelectorAddCompany from './CategorySelectorAddCompany';
const AddCompany = () => {
const dispatch = useDispatch();
const history = useHistory();
const [name, setName] = useState('');
const [capacity, setCapacity] = useState(1);
const [reserve, setReserve] = useState('');
const [homeSale, setHomeSale] = useState('');
const [reservePercentage, setReservePercentage] = useState(0);
const [companyCategoryId, setCompanyCategoryId] = useState('');
const [backendErrors, setBackendErrors] = useState(null);
let form;
const handleSubmit = event => {
event.preventDefault();
if (form.checkValidity()) {
dispatch(actions.addCompany(name.trim(),
capacity, reserve, homeSale,reservePercentage,1,
() => history.push('/users/login'),
errors => setBackendErrors(errors)));
} else {
setBackendErrors(null);
form.classList.add('was-validated');
}
}
const toNumber = value => value.length > 0 ? Number(value) : null;
return (
<div class="container">
<div className="row justify-content-center" >
<aside className="col-sm-6">
<Errors errors={backendErrors} onClose={() => setBackendErrors(null)}/>
<div className="card">
<article className="card-body">
<h4 className="card-title mb-4 mt-1">Añade tu empresa</h4>
<br/>
<form ref={node => form = node} className="needs-validation"
noValidate onSubmit={e => handleSubmit(e)}>
<div className="form-group">
<label for="name">Nombre: </label>
<input type="text" id="name" className="form-control"
value={name}
onChange={e => setName(e.target.value)}
autoFocus
required/>
<div className="invalid-feedback">
<FormattedMessage id='project.global.validator.required'/>
</div>
</div>
<div className="form-group">
<label for="capacity">Capacidad: </label>
<input type="number" id="capacity" min="1" step ="1" className="form-control"
placeholder="Name"
value={capacity}
onChange={e => setCapacity(e.target.value)}
autoFocus
required/>
<div className="invalid-feedback">
<FormattedMessage id='project.global.validator.required'/>
</div>
</div>
<CategorySelectorAddCompany id="companyCategoryId" className="custom-select my-1 mr-sm-2"
value={companyCategoryId}
onChange={e => setCompanyCategoryId(e.target.value)}/>
<div>
<label for="reserve">Reserva: </label>
<div className="form-check-inline">
<input type="radio" id="reserve" name="reserve" className="form-check-input"
value={true}
onChange={e => setReserve(e.target.value)}
autoFocus
checked
required/>
<label class="form-check-label" for="reserve">Yes</label>
</div>
<div className="form-check-inline">
<input type="radio" id="reserve2" name="reserve" className="form-check-input"
value={false}
onChange={e => setReserve(e.target.value)}
autoFocus
required/>
<label class="form-check-label" for="reserve2">No</label>
</div>
<div className="invalid-feedback">
<FormattedMessage id='project.global.validator.required'/>
</div>
</div>
<div>
<label for="homeSale">Venta a domicilio: </label>
<div className="form-check-inline">
<input type="radio" id="homeSale" name="homeSale" className="form-check-input"
value={true}
onChange={e => setHomeSale(e.target.value)}
autoFocus
checked
required/>
<label class="form-check-label" for="homeSale">Yes</label>
</div>
<div className="form-check-inline">
<input type="radio" id="homeSale2" name="homeSale" className="form-check-input"
value={false}
onChange={e => setHomeSale(e.target.value)}
autoFocus
required/>
<label class="form-check-label" for="homeSale2">No</label>
</div>
<div className="invalid-feedback">
<FormattedMessage id='project.global.validator.required'/>
</div>
</div>
<div className="form-group">
<label for="reservePercentage">Porcentaje de la señal de reserva: </label>
<input type="number" id="reservePercentage" min="0" step ="1" className="form-control"
value={reservePercentage}
onChange={e => setReservePercentage(e.target.value)}
autoFocus
required/>
<div className="invalid-feedback">
<FormattedMessage id='project.global.validator.required'/>
</div>
</div>
<br/>
<div className="row">
<div className="col">
<div className="form-group">
<button type="submit" className="btn btn-primary btn-block">Guardar</button>
</div>
</div>
</div>
</form>
</article>
</div>
</aside>
</div>
</div>
);
}
export default AddCompany;
backend/companyService.js :
import {config, appFetch} from './appFetch';
export const addCompany = (name, capacity, reserve, homaSale, reservePercentage, companyCategoryId,
onSuccess, onErrors) =>
appFetch(`/companies/add`,
config('POST', {name, capacity, reserve, homaSale, reservePercentage, companyCategoryId}),
onSuccess, onErrors);
export const modifyCompany = (company, onSuccess, onErrors) =>
appFetch(`/companies/${company.id}`, config('PUT', company),
onSuccess, onErrors);
export const deregister = (id, onSuccess, onErrors) =>
appFetch(`/companies/${id}/deregister`,
config('POST'), onSuccess, onErrors);
export const findAllCompanyCategories = (onSuccess) =>
appFetch('/companies/categories', config('GET'), onSuccess);
Un saludo y muchas gracias.
actions.js
, arriba hago primeroimport backend from '../../backend';
. Acabo de adjuntar el código debackend/companyServices.js
por si te sirve de ayuda. Un saludo – Franz Hammer el 17 jun. 20 a las 16:35backend
? Porque veo que importasimport backend from '../../backend';
pero en el codigo que compartes dices que tu ruta esbackend/companyService.js
. Ademas tendrias que acceder abackend.addCompany
porque no veo que tengas algo llamadocompanyService
dentro de backend. – Isaac el 17 jun. 20 a las 17:58