React Hooks，useReducer 无法获取状态

Question

我正在制作一个简单的组件，尝试使用 useEffect 和 useReducer 挂钩。除了数组中的 none 项实际上进入了组件之外，一切似乎都运行良好。我在各种函数中完成了一些 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

您从请求中获得的 return 中的数据是一个数组，因此您需要确保在减速器中的 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;
  }
}, []);

React Hooks，useReducer 无法获取状态

React Hooks, useReducer not able to get state

reactjs

react-hooks