如何在React中使用Custom Hooks封裝復(fù)雜的交互邏輯如表單驗(yàn)證或數(shù)據(jù)獲取

在React中使用Custom Hooks封裝復(fù)雜的交互邏輯可以使代碼更加簡(jiǎn)潔和可重用。下面是一個(gè)例子，演示如何使用Custom Hooks封裝表單驗(yàn)證和數(shù)據(jù)獲取邏輯：

import { useState } from 'react';

// Custom Hook for form validation
const useFormValidation = (initialState, validate) => {
  const [values, setValues] = useState(initialState);
  const [errors, setErrors] = useState({});

  const handleChange = (e) => {
    setValues({
      ...values,
      [e.target.name]: e.target.value,
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const validationErrors = validate(values);
    setErrors(validationErrors);
    if (Object.keys(validationErrors).length === 0) {
      // Form is valid, submit data
      // Add logic to submit data here
    }
  };

  return { values, errors, handleChange, handleSubmit };
};

// Custom Hook for fetching data
const useFetchData = (url) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const jsonData = await response.json();
        setData(jsonData);
        setLoading(false);
      } catch (error) {
        setError(error);
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, loading, error };
};

// Example usage of Custom Hooks
const MyComponent = () => {
  const { values, errors, handleChange, handleSubmit } = useFormValidation(
    { username: '', password: '' },
    (values) => {
      let errors = {};
      if (!values.username) {
        errors.username = 'Username is required';
      }
      if (!values.password) {
        errors.password = 'Password is required';
      }
      return errors;
    }
  );

  const { data, loading, error } = useFetchData('https://api.example.com/data');

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          name="username"
          value={values.username}
          onChange={handleChange}
        />
        {errors.username && <p>{errors.username}</p>}
        <input
          type="password"
          name="password"
          value={values.password}
          onChange={handleChange}
        />
        {errors.password && <p>{errors.password}</p>}
        <button type="submit">Submit</button>
      </form>

      {loading && <p>Loading data...</p>}
      {error && <p>Error fetching data</p>}
      {data && <p>{data}</p>}
    </div>
  );
};

在這個(gè)例子中，我們定義了兩個(gè)Custom Hooks：useFormValidation用于表單驗(yàn)證，useFetchData用于數(shù)據(jù)獲取。然后在MyComponent組件中使用這兩個(gè)Custom Hooks。通過(guò)這種方式，我們可以將復(fù)雜的交互邏輯封裝在Custom Hooks中，讓組件更加簡(jiǎn)潔和可維護(hù)。