如何在React中使用Custom Hooks封装复杂的交互逻辑如表单验证或数据获取

在React中使用Custom Hooks封装复杂的交互逻辑可以使代码更加简洁和可重用。下面是一个例子，演示如何使用Custom Hooks封装表单验证和数据获取逻辑：

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>
  );
};

在这个例子中，我们定义了两个Custom Hooks：useFormValidation用于表单验证，useFetchData用于数据获取。然后在MyComponent组件中使用这两个Custom Hooks。通过这种方式，我们可以将复杂的交互逻辑封装在Custom Hooks中，让组件更加简洁和可维护。