React组件如何访问外部初始化变量？Redux项目API数组导出遇阻

Hey there! Let's break down your problem step by step since you're new to React/Redux. It sounds like you're trying to fetch JSON data from an API (like your numberendpoint.json), store it as an array of objects, and share that array with other files—but you're hitting two roadblocks:

• The array you initialized outside your component isn't getting populated with API data
• You're unsure how to properly export this array for use in other files

Let's fix this with practical, beginner-friendly solutions:

First: Why Your External Array Isn't Populating #

The core issue here is asynchronous code. API requests don't finish immediately—when you initialize your array outside the component, the request is still running in the background, so the array stays empty. Even if you later assign data to it, React's component lifecycle or re-renders can reset that external variable, making it unreliable.

Instead of relying on external variables, we'll use React's built-in state management or Redux (since you're using it) to handle the data properly.

Solution 1: Function Components (React Hooks) + Custom Hooks (For Component-to-Component Sharing) #

If you're using modern React (function components), custom hooks are a clean way to fetch and share data across components.

Step 1: Create a Custom Hook in Your API File #

// numberendpoint.js
import { useState, useEffect } from 'react';

// Custom hook to fetch and return the API data
export const useNumberData = () => {
  // Use useState to store the array (React will track changes)
  const [dataArray, setDataArray] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // Fetch data when the hook loads
    const fetchData = async () => {
      try {
        const response = await fetch('/api/numberendpoint');
        if (!response.ok) throw new Error('Request failed');
        const data = await response.json();
        // Update the state with the fetched array
        setDataArray(data);
      } catch (err) {
        setError(err.message);
      } finally {
        setIsLoading(false);
      }
    };

    fetchData();
  }, []); // Empty dependency array = run once on mount

  return { dataArray, isLoading, error };
};

Step 2: Use the Hook in Another Component #

// OtherComponent.jsx
import { useNumberData } from './numberendpoint';

export default function OtherComponent() {
  // Get the data from our custom hook
  const { dataArray, isLoading, error } = useNumberData();

  // Handle loading/error states
  if (isLoading) return <div>Loading numbers...</div>;
  if (error) return <div>Oops: {error}</div>;

  // Render the data once it's ready
  return (
    <div>
      <h2>Numbers from API</h2>
      {dataArray.map((item) => (
        <p key={item.id}>{item.value}</p>
      ))}
    </div>
  );
}

Solution 2: Redux (For Cross-App Data Sharing) #

Since you're using Redux, it's perfect for storing shared data that multiple components need access to. We'll use Redux Toolkit (the official recommended approach for Redux) to simplify the code.

Step 1: Create a Redux Slice for Your Data #

// features/numbers/numbersSlice.js
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

// Async thunk to fetch data from the API
export const fetchNumbers = createAsyncThunk(
  'numbers/fetchNumbers',
  async () => {
    const response = await fetch('/api/numberendpoint');
    return response.json();
  }
);

const numbersSlice = createSlice({
  name: 'numbers',
  initialState: {
    data: [],
    status: 'idle', // idle/loading/succeeded/failed
    error: null
  },
  extraReducers: (builder) => {
    builder
      // Handle loading state
      .addCase(fetchNumbers.pending, (state) => {
        state.status = 'loading';
      })
      // Handle successful data fetch
      .addCase(fetchNumbers.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.data = action.payload; // Store the fetched array in Redux
      })
      // Handle errors
      .addCase(fetchNumbers.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.error.message;
      });
  }
});

// Export selectors to get data from the store
export const selectAllNumbers = (state) => state.numbers.data;
export const getNumbersStatus = (state) => state.numbers.status;
export const getNumbersError = (state) => state.numbers.error;

export default numbersSlice.reducer;

Step 2: Add the Slice to Your Redux Store #

// store.js
import { configureStore } from '@reduxjs/toolkit';
import numbersReducer from './features/numbers/numbersSlice';

export const store = configureStore({
  reducer: {
    numbers: numbersReducer // Register our numbers slice
  }
});

Step 3: Use Redux Data in Any Component #

// NumberList.jsx
import { useSelector, useDispatch } from 'react-redux';
import { fetchNumbers, selectAllNumbers, getNumbersStatus, getNumbersError } from './features/numbers/numbersSlice';
import { useEffect } from 'react';

export default function NumberList() {
  const dispatch = useDispatch();
  const numbers = useSelector(selectAllNumbers);
  const status = useSelector(getNumbersStatus);
  const error = useSelector(getNumbersError);

  // Fetch data when the component mounts
  useEffect(() => {
    if (status === 'idle') {
      dispatch(fetchNumbers());
    }
  }, [status, dispatch]);

  // Render based on state
  let content;
  if (status === 'loading') {
    content = <div>Loading...</div>;
  } else if (status === 'succeeded') {
    content = numbers.map(item => <p key={item.id}>{item.value}</p>);
  } else if (status === 'failed') {
    content = <div>Error: {error}</div>;
  }

  return <div>{content}</div>;
}

Solution 3: Export Data to Non-Component Files (e.g., Utility Functions) #

If you need the array in a non-component file (like a utility script), don't use external variables—use a Promise instead:

// numberendpoint.js
export const fetchNumberData = async () => {
  try {
    const response = await fetch('/api/numberendpoint');
    if (!response.ok) throw new Error('Request failed');
    return await response.json();
  } catch (err) {
    console.error('Fetch error:', err);
    return []; // Return empty array as fallback
  }
};

Then use it in your utility file:

// utils/numberUtils.js
import { fetchNumberData } from '../numberendpoint';

// Use the Promise to get the data
async function processNumbers() {
  const numbersArray = await fetchNumberData();
  // Do something with the array here
  console.log('Processed numbers:', numbersArray);
}

processNumbers();

Key Takeaways #

• Never rely on external variables to store API data in React—use useState (for component-local data) or Redux (for cross-app data) instead.
• API requests are asynchronous—always handle loading, success, and error states to avoid bugs.
• For component sharing, custom hooks are simple; for app-wide sharing, Redux is the way to go.

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