如何在React中处理非同步按钮点击和防抖问题

在React中处理非同步按钮点击和防抖问题可以通过以下几种方法：

1. 使用useState和useEffect钩子：通过useState来保存按钮点击状态，然后在useEffect中监听这个状态的变化，并在回调函数中处理异步操作。同时可以使用防抖函数来控制按钮点击频率。

import React, { useState, useEffect } from 'react';
import { debounce } from 'lodash';

const App = () => {
  const [loading, setLoading] = useState(false);

  const handleClick = debounce(() => {
    setLoading(true);
    // 异步操作
    setTimeout(() => {
      setLoading(false);
    }, 1000);
  }, 300);

  return (
    <button onClick={handleClick} disabled={loading}>
      {loading ? 'Loading...' : 'Click Me'}
    </button>
  );
};

export default App;

2. 使用useReducer钩子：可以使用useReducer来处理按钮点击状态和异步操作的逻辑，并使用防抖函数来控制按钮点击频率。

import React, { useReducer } from 'react';
import { debounce } from 'lodash';

const initialState = {
  loading: false,
};

const reducer = (state, action) => {
  switch (action.type) {
    case 'SET_LOADING':
      return { ...state, loading: action.payload };
    default:
      return state;
  }
};

const App = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  const handleClick = debounce(() => {
    dispatch({ type: 'SET_LOADING', payload: true });
    // 异步操作
    setTimeout(() => {
      dispatch({ type: 'SET_LOADING', payload: false });
    }, 1000);
  }, 300);

  return (
    <button onClick={handleClick} disabled={state.loading}>
      {state.loading ? 'Loading...' : 'Click Me'}
    </button>
  );
};

export default App;

这些方法都可以在React中处理非同步按钮点击和防抖问题，具体选择哪种方式取决于你的项目需求和个人喜好。