React-Redux -在组件中的另一个请求中使用来自componentDidMount中fetch请求的响应

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchData } from '../actions';

class MyComponent extends Component {
  componentDidMount() {
    // 发起fetch请求
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        // 将响应数据存储在组件的状态中
        this.props.fetchData(data);
      });
  }

  render() {
    // 渲染组件
    return (
      <div>
        {/* 组件内容 */}
      </div>
    );
  }
}

const mapDispatchToProps = dispatch => {
  return {
    fetchData: data => dispatch(fetchData(data))
  };
};

export default connect(null, mapDispatchToProps)(MyComponent);

// actions.js
export const fetchData = data => {
  return {
    type: 'FETCH_DATA',
    payload: data
  };
};

// reducer.js
const initialState = {
  data: null
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'FETCH_DATA':
      return {
        ...state,
        data: action.payload
      };
    default:
      return state;
  }
};

export default reducer;

import React from 'react';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import reducer from './reducer';
import MyComponent from './components/MyComponent';

const store = createStore(reducer);

const App = () => {
  return (
    <Provider store={store}>
      <MyComponent />
    </Provider>
  );
};

export default App;