Actualmente estoy trabajando en el uso del enlace de contexto en el mecanografiado de reacción y tengo algunos problemas con la actualización y estoy confundido acerca de .Provider y .Comsumer de la API.
este es mi código para aumentar 1 día al hacer clic en el botón
import React, {createContext, useContext, useState} from "react" type MonthCalendarProps = { }; const CalendarContext = createContext({ focusDate: new Date(), selectedDate: new Date(), changeFocusDate: (date: Date) => {} }) function IncreaseButton(props : any) { const calendarContext = useContext(CalendarContext) const increase = () => { console.log(props.value.focusDate) let tmpDate : Date = calendarContext.focusDate tmpDate.setDate(tmpDate.getDate() + 1) calendarContext.changeFocusDate(tmpDate) } const getStringFromDate = (date: Date) : string => { console.log(date) return date.toDateString() } return ( <div> <p>{getStringFromDate(calendarContext.focusDate)}</p> <button onClick = {increase}> + </button> </div> ) } export default function MonthCalendar ( {} : MonthCalendarProps) { const [focusDate, setFocusDate] = useState(new Date()) const [selectedDate, setSelectedDate] = useState(new Date()) const value = {focusDate: focusDate, selectedDate: selectedDate, changeFocusDate: setFocusDate} const context = useContext(CalendarContext) console.log(context.focusDate) return ( <CalendarContext.Provider value = {value}> <CalendarContext.Consumer> {value => <IncreaseButton value = {value}/>} </CalendarContext.Consumer> </CalendarContext.Provider> ) } Al hacer clic en el botón, la función de increase interna de console.log mostró que focusDate se actualizó pero la interfaz de usuario, también conocida como <p>{getStringFromDate(calendarContext.focusDate}</p> no se actualizó.
¿Cuál es el problema con mi código y cómo solucionarlo? y ustedes pueden explicar ¿Por qué ?
Si es posible, ¿puede explicarme más sobre el comportamiento de .Consumer y .Provider , por favor?
let tmpDate : Date = calendarContext.focusDate tmpDate.setDate(tmpDate.getDate() + 1) calendarContext.changeFocusDate(tmpDate) Está mutando el objeto de fecha existente, no creando uno nuevo. Cuando establezca el estado, reaccionar hará un === entre el estado antiguo y el nuevo. Dado que son el mismo objeto, parece que nada ha cambiado, por lo que reaccionar omite el renderizado.
En su lugar, crea una nueva fecha:
let tmpDate = new Date(calendarContext.focusDate); tmpDate.setDate(tmpDate.getDate() + 1) calendarContext.changeFocusDate(tmpDate) PD, en MonthCalendar estás llamando a const context = useContext(CalendarContext) . Esto solo obtendrá el contexto de los componentes principales. No obtendrá el contexto de sí mismo. Eso no está contribuyendo al error en el botón de aumento, pero hará que console.log(context.focusDate) sea engañoso