Lodash debounce 在 React 中无效

9 浏览
0 Comments

Lodash debounce 在 React 中无效

最好先查看我的代码：

import React, { Component } from 'react';

import _ from 'lodash';

import Services from 'Services'; // Webservice calls

export default class componentName extends Component {

constructor(props) {

super(props);

this.state = {

value: this.props.value || null

}

}

onChange(value) {

this.setState({ value });

// 这里不会调用 Services.setValue

_.debounce(() => Services.setValue(value), 1000);

}

render() {

return (

onChange={(event, value) => this.onChange(value)}

value={this.state.value}

/>

)

}

}

只是一个简单的输入框。在构造函数中，它从props中获取value（如果有的话），并为组件设置一个本地状态。

然后，在输入框的onChange函数中，我更新状态，然后尝试调用webservice端点以使用Services.setValue()设置新值。

如果我直接在输入框的onChange中设置了防抖动，是可以工作的，像这样：

value={this.state.value}

onChange={_.debounce((event, value) => this.onChange(value), 1000)}

/>

但是，这样会导致this.setState只在每1000毫秒更新一次视图。所以在文本框中输入会看起来很奇怪，因为你输入的内容只会在一秒后显示出来。

在这种情况下，我该怎么办呢？

0