在 React Native 中将类转换为函数时遇到问题答案

【问题标题】：Trouble converting a class to function in React Native在 React Native 中将类转换为函数时遇到问题
【发布时间】：2022-10-07 18:34:54
【问题描述】：

我正在尝试将此代码从类重写为函数。我从未使用过类，但是我在学习本机反应时获得了日历应用程序的测试代码，但是当我尝试将 componentDidUpdate 替换为 useEffect 时，我似乎卡在了某个地方。

这是旧代码：

export default class DaysInMonth extends React.PureComponent{

state = {
    lastCalendarDayIndex: 0, 
    currentCalendarDayIndex: 0,
}

changeCurrentCalendarDayIndex = (index) => {
    this.setState({
        currentCalendarDayIndex: index
    })
}

componentDidUpdate(prevProps, prevState){
    if(this.state.currentCalendarDayIndex !== prevState.currentCalendarDayIndex){
        this.setState({
            lastCalendarDayIndex: prevState.currentCalendarDayIndex
        })
    }
}

render(){
    return(
        <>
            {
                this.props.row_days_array.map((rowData, index) => (
                    <CalendarRow 
                        key = {\'calendar row \' + index}
                        rowData = {rowData}

                        lastCalendarDayIndex = {this.state.lastCalendarDayIndex}
                        changeCurrentCalendarDayIndex = {this.changeCurrentCalendarDayIndex}
                        month_index = {this.props.month_index}
                        current_month_index = {this.props.current_month_index}
                        chooseDifferentMonth = {this.props.chooseDifferentMonth}
                    />
                ))
            }
        </>
    )
}

}

这是新代码除了一些与 useEffect 相关的功能外，一切正常，我不明白应该添加哪些属性才能获得与以前相同的功能。谢谢

export default function DaysInMonth({row_days_array, month_index, current_month_index, chooseDifferentMonth}) {
 const [lastCalendarDayIndex, setLastCalendarDayIndex] = useState(0)
 const [currentCalendarDayIndex, setCurrentCalendarDayIndex] = useState(0)

 const changeCurrentCalendarDayIndex = (index) => {
    setCurrentCalendarDayIndex(index)
}

useEffect(() => {
    if(currentCalendarDayIndex !== currentCalendarDayIndex){
        setLastCalendarDayIndex(currentCalendarDayIndex)
    }

  },[]);

  return (
    <>
        {row_days_array.map((rowData, index) => (
            <CalendarRow 
                key = {\'calendar row \' + index}
                rowData = {rowData}

                lastCalendarDayIndex = {lastCalendarDayIndex}
                changeCurrentCalendarDayIndex = {changeCurrentCalendarDayIndex}

                month_index = {month_index}
                current_month_index = {current_month_index}
                chooseDifferentMonth = {chooseDifferentMonth}
            />
        ))}
    </>
  )
}

标签： reactjs react-native

【解决方案1】：

这是做什么的：

useEffect(() => {
    if(currentCalendarDayIndex !== currentCalendarDayIndex){
        setLastCalendarDayIndex(currentCalendarDayIndex)
    }
},[]);

每次数组更改时，它都会运行 useEffect 中的代码。因为它是一个空数组，它只会运行一次（一旦组件挂载，这基本上是旧的ComponentDidMount），要模仿ComponentDidUpdate 的行为，你需要跟踪props 所以这应该是一个问题将它们传递到数组中（因此 React 可以跟踪它何时更改）：

useEffect(() => {
    if(currentCalendarDayIndex !== currentCalendarDayIndex){
        setLastCalendarDayIndex(currentCalendarDayIndex)
    }
},[props]);

将组件定义 {row_days_array, month_index, current_month_index, chooseDifferentMonth} 中的解构更改为 props 可能更容易，然后在下面进行一点解构，因此您可以在 useEffect 数组中使用整个对象

【讨论】：