如何让带有useReducer的react组件在axios调用后重新渲染？

要让带有useReducer的React组件在axios调用后重新渲染，可以按照以下步骤操作：

在组件中引入useState和useReducer钩子函数，并定义相应的状态和reducer函数。例如：

import React, { useState, useReducer, useEffect } from 'react';

// 初始状态
const initialState = {
  data: null,
  loading: true,
  error: null,
};

// reducer函数
const reducer = (state, action) => {
  switch (action.type) {
    case 'FETCH_SUCCESS':
      return { ...state, loading: false, data: action.payload, error: null };
    case 'FETCH_ERROR':
      return { ...state, loading: false, data: null, error: action.payload };
    default:
      return state;
  }
};

const MyComponent = () => {
  const [state, dispatch] = useReducer(reducer, initialState);
  
  // useEffect监听数据变化
  useEffect(() => {
    fetchData();
  }, []);
  
  // 异步获取数据的函数
  const fetchData = async () => {
    try {
      const response = await axios.get('API_URL');
      dispatch({ type: 'FETCH_SUCCESS', payload: response.data });
    } catch (error) {
      dispatch({ type: 'FETCH_ERROR', payload: error.message });
    }
  };
  
  if (state.loading) {
    return <div>Loading...</div>;
  }

  if (state.error) {
    return <div>Error: {state.error}</div>;
  }

  return <div>Data: {state.data}</div>;
};

export default MyComponent;

在组件中使用useEffect钩子函数，在初始化和依赖项变化时调用异步数据获取的函数fetchData()。通过axios发送异步请求，获取数据后使用dispatch函数来触发reducer，更新组件的状态。
在reducer函数中，根据action的类型更新状态。当成功获取数据时，将loading设为false，保存数据至state.data，并清空error。当发生错误时，将loading设为false，清空data，并将错误信息保存至error。
在组件的返回部分根据不同的状态，展示相应的内容。如果仍在加载数据中，显示"Loading..."；如果发生错误，显示"Error: 错误信息"；如果成功获取数据，显示"Data: 数据内容"。

通过以上步骤，带有useReducer的React组件在axios调用后将能够重新渲染，并根据获取的数据进行相应的展示。