Great question! Coming from PHP, that variable mapping pattern you're used to translates really well to JavaScript and React—there are several clean, maintainable approaches to handle this, depending on how complex your mapping needs are.

1. Direct Mapping Object (Closest to Your PHP Approach) #

This is the most straightforward equivalent to your PHP associative array method. You can define a mapping object that maps local key names to API key names, then write a simple utility function to transform your local data into the API's expected format.

Example code:

// Define your variable mapping
const paramMap = {
  localVar1: 'api_var_1',
  localVar2: 'api_var_2',
  userEmail: 'email_address' // Example of a name mismatch
};

// Utility function to convert local data to API params
const convertToApiParams = (localData) => {
  const apiParams = {};
  Object.entries(localData).forEach(([localKey, value]) => {
    const apiKey = paramMap[localKey];
    if (apiKey) { // Only include keys that have a mapping
      apiParams[apiKey] = value;
    }
  });
  return apiParams;
};

// Usage in your component/API call
const localFormData = {
  localVar1: 'foo',
  localVar2: 'bar',
  userEmail: 'user@example.com'
};

const apiParams = convertToApiParams(localFormData);
// Result: { api_var_1: 'foo', api_var_2: 'bar', email_address: 'user@example.com' }

// Pass to your API fetch call
fetch('/api/endpoint', {
  method: 'POST',
  body: JSON.stringify(apiParams),
  headers: { 'Content-Type': 'application/json' }
});

2. Transform Functions (For Complex Logic) #

If you need more than just name mapping—like type conversion, setting default values, or conditional inclusion—create a dedicated transform function. This keeps your logic explicit and easy to maintain.

Example:

const transformLocalToApi = (localData) => {
  return {
    api_var_1: localData.localVar1,
    api_var_2: localData.localVar2 || 'default_value', // Add default value
    user_id: Number(localData.userId), // Convert string to number
    is_active: localData.userStatus === 'active' // Map boolean logic
  };
};

// Usage
const apiParams = transformLocalToApi({
  localVar1: 'test',
  userId: '123',
  userStatus: 'active'
});

3. Encapsulate in an API Client (Best for Scalable Apps) #

For larger React apps, the best practice is to wrap all API calls in a dedicated service layer (an "API client"). This centralizes all mapping logic, so you don't repeat it across components, and makes it easier to update if the API changes.

Example of an API client module (apiClient.js):

// Centralized mapping and API logic
const paramMap = {
  localVar1: 'api_var_1',
  localVar2: 'api_var_2'
};

const convertToApiParams = (localData) => {
  const apiParams = {};
  Object.entries(localData).forEach(([localKey, value]) => {
    const apiKey = paramMap[localKey];
    if (apiKey) apiParams[apiKey] = value;
  });
  return apiParams;
};

export const submitDataToApi = async (localData) => {
  const apiParams = convertToApiParams(localData);
  const response = await fetch('/api/endpoint', {
    method: 'POST',
    body: JSON.stringify(apiParams),
    headers: { 'Content-Type': 'application/json' }
  });
  return response.json();
};

Then in your React component:

import { submitDataToApi } from './apiClient';

const MyComponent = () => {
  const handleSubmit = async () => {
    const localData = { localVar1: 'hello', localVar2: 'world' };
    const result = await submitDataToApi(localData);
    // Handle result
  };

  return <button onClick={handleSubmit}>Submit</button>;
};

Key Takeaways #

• For simple, one-to-one mappings: Use the direct mapping object approach—it's lightweight and familiar if you're coming from PHP.
• For complex transformations: Use a dedicated transform function to keep logic clear.
• For scalable apps: Centralize mapping and API calls in an API client to avoid duplication and improve maintainability.

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