setState 完成后如何去抖动表单中的更改

Question

很难弄清楚这一点。 前几天，其他一些人帮助我消除了抖动，但事实证明，我现在实际上在每次击键时都在消除抖动，这会导致打字时出现无法接受的延迟。

所以首先，我在我的 handleChange 方法中添加了 debounce，因为如果你输入的速度非常快，你可以移动到另一个字段并继续前进，第一个字段不会更新它的状态。

然后，我为每个元素设置了一个超时时间，这样即使你继续前进，它也会完成。 但后来我注意到打字时出现了令人无法接受的延迟。

我对如何让它更新状态感到非常困惑，即使用户已经继续前进并继续在下一个字段中输入，以及在输入中断时自动保存到 db 也是如此。

// editingTimeout should be an object in the state
handleChange = (e) => {
  const targetName = e.target.name;
  const targetValue = e.target.value;

  this.setState(state => {
    clearTimeout(this.state.editingTimeout[targetName]);
    return ({
      editing: false,
      editingTimeout: {
        ...state.editingTimeout,
        [targetName]: setTimeout(() => {
          console.log(`${targetName}: ${targetValue}`);
          this.setState({
            [targetName]: targetValue,
          });
        }, 300),
      }
    })
  });
};

Answer 1

为了将表单的变化去抖到 api，你不需要去抖状态更新，而是在状态变化时调用的 api 调用。 我所做的是，更新状态，然后调用一个函数，将更改发送到服务器，如下所示：

import debounce from 'debounce';

class ComponentA extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '',
      email: '',
    }
  }
  
  handleInputChange = (e) => {
    this.setState({ [e.target.name]: e.target.value }, () => this.update())
  }


  update = debounce(() => {
    const data = {
      name: this.state.name,
      email: this.state.email,
    }
    this.props.updateApiCall(data);
  }, 1000);
  
  render () {
    return (
      <div>
        <input name='name' onChange={this.handleInputChange} value={this.state.name} />
        <input name='email' onChange={this.handleInputChange} value={this.state.email} />
      </div>
    )
  }
}

在这个 wat 中，用户更新哪个字段并不重要，去抖动只会应用于 api 调用。