在React.Component中模拟钩子useState state的scope问题

Question

Good Morning, I am trying to create a function in my class React.Component to allow modify a state value with a function.

   setCurrentIndex(update) {
        if (typeof update === 'function') {
            let newValue = update(this.state.currentIndex)
            this.setState({ currentIndex: newValue })
        } else {
            this.setState({ currentIndex: update })
        }
    }

The problem is that when I execute this function in a child of my component, javascript says that this.state.currentIndex does not exist.

Here is my constructor:

constructor(props) {
    super(props)
    this.state = {
        currentIndex: props.index
    }
}

Thank you, Best Regards, Fernando Moreno.

Answer 1

Thanks to HMR, he replies to me the solution in a comment of the question, you just need to do this function as arrow function like this.

setCurrentIndex = (update) => {
    if (typeof update === 'function') {
        let newValue = update(this.state.currentIndex)
        this.setState({ currentIndex: newValue })
    } else {
        this.setState({ currentIndex: update })
    }
}

Thank you!