面试题：React高阶组件封装API请求中的props传递问题

Question

在使用高阶组件封装API请求时，假设高阶组件名为withAPIData，被包裹组件需要的数据通过props传递。如果被包裹组件需要多个API请求的数据，应该如何设计props结构，使得数据清晰且便于维护？请给出示例代码说明。

Answer 1

1. Props结构设计思路：
   • 为每个API请求的数据创建一个独立的属性。
   • 这样可以使数据结构清晰，每个API的数据来源和用途一目了然，便于维护。
2. 示例代码：

import React from'react';

// 模拟API请求函数
const apiRequest1 = () => Promise.resolve({ data1: 'Result of API 1' });
const apiRequest2 = () => Promise.resolve({ data2: 'Result of API 2' });

// 高阶组件withAPIData
const withAPIData = (WrappedComponent) => {
    return class extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                apiData1: null,
                apiData2: null
            };
        }
        componentDidMount() {
            apiRequest1().then(data => this.setState({ apiData1: data }));
            apiRequest2().then(data => this.setState({ apiData2: data }));
        }
        render() {
            return <WrappedComponent apiData1={this.state.apiData1} apiData2={this.state.apiData2} {...this.props} />;
        }
    };
};

// 被包裹组件
const MyComponent = ({ apiData1, apiData2 }) => {
    return (
        <div>
            {apiData1 && <p>{JSON.stringify(apiData1)}</p>}
            {apiData2 && <p>{JSON.stringify(apiData2)}</p>}
        </div>
    );
};

// 使用高阶组件包裹
const EnhancedComponent = withAPIData(MyComponent);

export default EnhancedComponent;

在上述代码中：

• withAPIData高阶组件负责发起多个API请求，并将结果分别存储在state的不同属性中。
• 然后通过props将不同API的数据（apiData1和apiData2）传递给被包裹组件MyComponent。
• MyComponent可以清晰地从props中获取和使用对应API的数据，使得数据结构清晰且易于维护。