Рефакторинг компонента класса в компонент функции в реакции js - PullRequest
0 голосов
/ 08 апреля 2020

У меня есть компонент класса, теперь я хочу преобразовать его в компонент функции, поэтому я начал с конструктора рефакторинга

вот мой компонент класса

class EventCalendar extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            today: this.getToday(),
        };         
    }

    getToday() {
        var today = new Date();
        return {
            day: today.getDate(),
            month: today.getMonth(),
            year: today.getFullYear(),
        };
    }

       renderCalendarDays() {
        return this.getDaysWithEvents().map((day, index) => {
            const isToday = Calendar.interval(day, this.state.today) === 1;            
            return (
                <CalendarDay 
                    day={day} 
                    isToday={isToday} 
                    />
                );
        });
    }

      render() {

        return (
                {this.renderCalendarDays()}
            </div>
        );
    }

}

Вот мой рефакторированный функциональный компонент из класса

const EventCalendar =props=> {

const [today, setToday] = useState();
const calendar = new Calendar({siblingMonths: true, });

useEffect(() => {
   setToday();
},[])

const  setToday =()=>{
    var today = new Date();
    return {
        day: today.getDate(),
        month: today.getMonth(),
        year: today.getFullYear(),
    };
}
  const  renderCalendarDays = ()=>{
        return getDaysWithEvents().map((day, index) => {
            const isToday = Calendar.interval(day, today) === 1;
            return (
                <CalendarDay 
                    day={day} 
                    isToday={isToday} 

                    />
                );
        });
    }

        return (
            <div className="flexContainer">
                {renderCalendarDays()}
            </div>
        );
}

К сожалению, я изо всех сил стараюсь сделать эту работу, кто-то может мне помочь, что я здесь не так делаю?

1 Ответ

2 голосов
/ 08 апреля 2020

У вас есть два setToday метода. В useEffect вы хотите вызвать что-то вроде этого:

useEffect(() => {
   ...
   setToday(createToday());
   ...
},{})
createToday = () => {
    const today = new Date();
    return {
        day: today.getDate(),
        month: today.getMonth(),
        year: today.getFullYear(),
    };
}

Прямо сейчас, когда вы звоните setToday() в useEffect, я, честно говоря, не знаю, устанавливаете ли вы состояние переменная, от today до null или вы вызываете свой вспомогательный метод, возвращая объект, но не назначая его.

Кроме того, имейте в виду useEffect для побочных эффектов (отсюда и название), такие как обращение к службам, выполнение асинхронных действий и т. д. c.

Вы можете пропустить useEffect и просто запустить createToday в своем определении состояния:

const [today, setToday] = useState(createToday());

Пример того, как я могу это сделать:

const createToday =()=>{
    const today = new Date();
    return {
        day: today.getDate(),
        month: today.getMonth(),
        year: today.getFullYear(),
    };
}


const EventCalendar = (/*no props yet*/)=> {

const [today, setToday] = useState(createToday());
const calendar = new Calendar({siblingMonths: true, });

const renderCalendarDays = ()=>{
    return getDaysWithEvents().map((day, index) => {
        const isToday = Calendar.interval(day, today) === 1;
        return (
            <CalendarDay 
                day={day} 
                isToday={isToday} 

                />
            );
        });
    }

    return (
        <div className="flexContainer">
            {renderCalendarDays()}
        </div>
    );
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...