如何将多页面复用的Fetch请求封装为可复用组件？遇构造器调用问题求解

首先，咱们拆解你遇到的核心问题：fetchPosts类构造器必须通过new调用的报错，以及高阶组件未生效的根源。

错误原因分析 #

1. 高阶组件使用方式错误：你写的fetchPosts是高阶组件函数，不是React组件类，不能直接像<fetchPosts />那样实例化使用。它的作用是包裹你的业务组件，把fetchAllPosts方法注入到业务组件的props中。
2. 语法缺陷+this绑定问题：原代码的render方法有语法错误（闭合括号不匹配），且fetchAllPosts方法未绑定this，直接调用会导致this.setState指向异常。

修正后的高阶组件代码 #

先修复你的高阶组件，解决语法和绑定问题：

import React, { Component } from 'react';

function fetchPosts(WrappedComponent) {
  class FetchPosts extends Component {
    constructor(props) {
      super(props);
      this.state = { posts: [] };
      // 绑定this，确保fetchAllPosts内的this指向当前组件实例
      this.fetchAllPosts = this.fetchAllPosts.bind(this);
    }

    fetchAllPosts() {
      fetch('/testrouter')
        .then(response => response.json())
        .then(jsonData => {
          this.setState({ posts: jsonData });
          // 可选：如果需要让业务组件直接拿到数据，可通过回调传递
          this.props.onPostsFetched?.(jsonData);
        })
        .catch(err => console.log('Error fetch posts data ' + err));
    }

    render() {
      // 将fetch方法、posts数据及原props传递给被包裹组件
      return (
        <WrappedComponent
          fetchAllPosts={this.fetchAllPosts}
          posts={this.state.posts}
          {...this.props}
        />
      );
    }
  }
  return FetchPosts;
}

export default fetchPosts;

正确的使用方式 #

假设你有一个业务组件PostList，需要在componentDidMount中调用fetch逻辑：

import React, { Component } from 'react';
import fetchPosts from './fetchPosts'; // 导入高阶组件

class PostList extends Component {
  componentDidMount() {
    // 通过props调用注入的fetch方法
    this.props.fetchAllPosts();
  }

  render() {
    // 使用props传递的posts数据渲染
    return (
      <div>
        {this.props.posts.map(post => (
          <div key={post.id}>{post.title}</div>
        ))}
      </div>
    );
  }
}

// 关键：用高阶组件包裹业务组件后再导出
export default fetchPosts(PostList);

额外建议：函数组件用自定义Hook更简洁 #

如果你的项目已经使用函数组件，封装成自定义Hook会更轻便，无需高阶组件：

import { useState, useEffect } from 'react';

function useFetchPosts() {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  const fetchAllPosts = () => {
    setLoading(true);
    fetch('/testrouter')
      .then(response => {
        if (!response.ok) throw new Error('Network response was not ok');
        return response.json();
      })
      .then(jsonData => {
        setPosts(jsonData);
        setError(null);
      })
      .catch(err => {
        setError('Error fetch posts data ' + err);
        console.error(err);
      })
      .finally(() => setLoading(false));
  };

  // 可选：挂载时自动调用，取消注释即可
  // useEffect(() => {
  //   fetchAllPosts();
  // }, []);

  return { posts, loading, error, fetchAllPosts };
}

// 使用示例
function PostList() {
  const { posts, loading, error, fetchAllPosts } = useFetchPosts();

  useEffect(() => {
    fetchAllPosts();
  }, []);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>{error}</div>;

  return (
    <div>
      {posts.map(post => (
        <div key={post.id}>{post.title}</div>
      ))}
    </div>
  );
}

这样不管是类组件还是函数组件，都能轻松复用你的Fetch请求逻辑了。

内容的提问来源于stack exchange，提问作者jonasiri