Reactjs React挂钩，useReducer无法获取状态

我正在制作一个简单的组件，试图利用useffect和useReducer挂钩。除了数组中没有一个项真正进入组件之外，其他一切似乎都正常工作。我在各种函数中执行了一些console.log语句，我可以看到API调用是成功的，并且数据在events下的函数范围内可用。但是，渲染的只是一个空框。我的代码是：

import React, { useReducer, useEffect } from "react";
import "./App.css";

const  App = () => {
  const [events, dispatch] = useReducer(
      (state, action) => { switch (action.type) {
          case "fetchEvents":
              state = [ ...state, action.data];
             return state;

            case "removeEvent":
              return state.filter((_, idx) => idx !== action.idx);

            default:
                console.log(state);
              return state;
        }
      },
  []);

  useEffect(async () => {
    const response = await fetch("https://easynode-veohkvapci.now.sh/api/test");
    const data = await response.json();
    dispatch({type: "fetchEvents", data});
  },[]);

  console.log(events, 'log events');

  return (
      <div>
          {events.map((event, idx) => (
              <div key={event.event_url} style={{ border: "solid" }}>
                  <p>{event.name}</p>
                  <p>{event.date}</p>
                  <p>{event.description}</p>
                <button onClick={() => dispatch({ type: "removeEvent", idx})}>Remove Event</button>
              </div>
          ))}
      </div>
  );
};

export default App;

import React，{useReducer，useffect}来自“React”；
导入“/App.css”；
常量应用=（）=>{
const[events，dispatch]=useReducer(
（state，action）=>{switch（action.type）{
案例“fetchEvents”：
state=[…state，action.data]；
返回状态；
案例“removeEvent”：
返回状态.filter（（x，idx）=>idx！==action.idx）；
违约：
console.log（状态）；
返回状态；
}
},
[]);
useffect（异步（）=>{
const response=等待获取（“https://easynode-veohkvapci.now.sh/api/test");
const data=wait response.json（）；
分派（{type:“fetchEvents”，data}）；
},[]);
日志（事件，“日志事件”）；
返回(
{events.map（（event，idx）=>(
{event.name}

{event.date}

{event.description}

分派（{type:“removeEvent”，idx}）}>Remove事件
))}
);
};
导出默认应用程序；

我应该在useReducer内部调用useEffect吗？我可能把本来应该以异步方式发生的事情搞砸了

从请求返回的数据是一个数组，因此您需要确保在reducer中的

fetchEvents

案例中也传播该数组

const[events，dispatch]=useReducer（（状态，动作）=>{
开关（动作类型）{
案例“fetchEvents”：
state=[…state，…action.data]；
返回状态；
案例“removeEvent”：
返回状态.filter（（x，idx）=>idx！==action.idx）；
违约：
返回状态；
}
}, []);