使用去抖功能时，反应“忘记”状态

Question

对于比I更了解React / RN的人来说，这是一个问题。当我在具有去抖功能的轻量级包装器中包装可触摸组件（即按钮）时（为了防止onPress处理程序被过快地调用），它通常按预期工作。但是，在一系列非常具体的情况下，事情就会出错。如果我将父组件的状态向下传递到按钮的onPress支持，如果我正在访问的状态属性已在render方法中被解构，然后作为此变量传递，而不是简单地作为this.state.foo访问， onPress处理程序将其读取为其初始状态值，即使它已被更新。这可能令人困惑，所以请允许我向您展示一个快速，不完整的例子：

class DebounceButton extends Component {
    handlePress = debounce(this.props.onPress, 500)
    render() {
        return (
            <Button onPress={this.handlePress}
        )
    }
}

class Screen extends Component {
    state = {
        foo: 0
    }

    render() {
        const { foo } = this.state
        return (
            <Button onPress={() => {this.setState({ foo: this.state.foo + 1 })}}/>
            <DebounceButton onPress={() => {console.log(foo)}}/>
            <DebounceButton onPress={() => {console.log(this.state.foo)}}/>
        )
    }
}

如果我按下按钮，foo会增加到1.如果我按下第一个DebounceButton，控制台将记录0.如果我按下第二个，它将按原样记录1。请注意，只有在状态通过去抖函数并且在render方法中赋值给变量时才会发生。这就好像React“忘记”了当前的状态并默认为其初始值。这对我来说不再是一个错误，因为我不再使用这个去抖动范例，但我很想知道它更好，所以我可以更好地掌握React的工作方式。非常感谢任何见解。

Answer 1

只有在首次创建handlePress = debounce(this.props.onPress, 500)时才会评估类属性DebounceButton，因此在首次渲染onPress之后更改它不起作用。

您可以改为创建一个在其中调用this.props.onPress的新函数。这样每次都会使用this.props.onPress的当前值。

class DebounceButton extends Component {
    handlePress = debounce(() => {
        this.props.onPress();
    }, 500);

    render() {
        return <Button onPress={this.handlePress} />;
    }
}