Tengo una aplicación de reacción. Tengo una función que actualiza un objeto con setState. Paso los datos a otro componente con props y hago un console.log.
console.log(workingHours, workingHours.monday.startHourMonday);en el primer volcado las horas de trabajo del objeto tienen los valores
{ "monday": { "startHourMonday": "9:0", "endHourMonday": "19:0" }, "tuesday": { "startHourTuesday": "9:0", "endHourTuesday": "19:0" }, "wednesday": { "startHourWednesday": "9:0", "endHourWednesday": "19:0" }, "thursday": { "startHourThursday": "9:0", "endHourThursday": "19:0" }, "friday": { "startHourFriday": "9:0", "endHourFriday": "19:0" }}
pero el problema es por la llave lunes
{ "startHourMonday": "", "endHourMonday": "" }los valores volcados están vacíos.
la función que está actualizando los datos
const [response, setResponse] = useState([]); const workingHoursData = (response) => { return response.map( el => { workingHours.monday = {startHourMonday:el.startHourMonday, endHourMonday:el.endHourMonday}; workingHours.tuesday = {startHourTuesday:el.startHourTuesday, endHourTuesday:el.endHourTuesday}; workingHours.wednesday = {startHourWednesday:el.startHourWednesday, endHourWednesday:el.endHourWednesday}; workingHours.thursday = {startHourThursday: el.startHourThursday, endHourThursday:el.endHourThursday}; workingHours.friday = {startHourFriday:el.startHourFriday,endHourFriday: el.endHourFriday} }) } useEffect(() => { try { apiOperations.getData("configs").then(response => { setResponse(response.data) }).catch(e => { props.history.push(adminLogin); }) } catch (e) { console.log(e) } }, []) useEffect (() => { workingHoursData(response); },[response])alguien sabe porque?
Actualizar:
el problema es que configuro directamente los valores de los estados en el objeto. Debo usar la función setState.
Puede crear un estado separado para las horas de trabajo y registrar la respuesta allí mismo. También escribí abreviaturas para formatear tu respuesta a lo que necesitas.
const [response, setResponse] = useState([]); const [workingHours, setWorkingHours] = useState({}) const weekdays = ['monday', 'tuesday', 'wendesday', 'thursday', 'friday'] const upperFirstLetter = (word) => word[0].toUpperCase() + word.slice(1) useEffect(() => { try { apiOperations.getData("configs").then(response => { setResponse(response.data) }).catch(e => { props.history.push(adminLogin); }) } catch (e) { console.log(e) } }, []) useEffect (() => { const formatResponse = weekdays.reduce((obj, day) => ({ ...obj, [day]: { startHour: response[`startHour${upperFirstLetter(day)}`], endHour: response[`endHour${upperFirstLetter(day)}`] } }), {}) setWorkingHours(formatResponse); },[response]) Creo que no hay razón para nombrar startHourMonday porque monday.StartHourMonday es un poco prolijo, pero si necesita crear exactamente este campo, simplemente reemplace
startHour: response[`startHour${upperFirstLetter(day)}`]con
[`startHour$(upperFirstLetter(day)}`]: response[`startHour${upperFirstLetter(day)}`]