时间戳

首页 > 解决方案 > react js中类组件重构为函数组件

javascript - react js中类组件重构为函数组件

问题描述

我现在有类组件我想将它转换为函数组件所以我从重构构造函数开始

这是我的类组件

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>
        );
}

不幸的是，我正在努力完成这项工作，有人可以帮助我吗，我在这里做错了什么？

标签： javascriptreactjsreact-hooks

解决方案

你实际上有两种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副作用（因此得名），例如接触服务、执行异步操作等。

您可以跳过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 = () => getDaysWithEvents().map((day, index) => {
        const isToday = Calendar.interval(day, today) === 1;
        return (
            <CalendarDay 
                day={day} 
                isToday={isToday} 

                />
            );
        });
    }

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

推荐阅读