React Hooks，useReducer无法获取状态

Question

我正在制作一个简单的组件，尝试使用useEffect和useReducer挂钩。除了数组中没有任何项真正进入组件之外，一切似乎都很正常。我在各种函数中做了一些console.log语句，我可以看到API调用是成功的，并且数据在事件下的函数范围内可用。但是，所有渲染都是一个空框。我的代码是：

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;

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

Answer 1

您从请求中获得的返回数据是一个数组，因此您需要确保在reducer中的fetchEvents情况下也能传播该数组。

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:
return state;
}
}, []);