useReducer 没有使用 useEffect 更新状态答案

【问题标题】：useReducer is not updating the sate with useEffectuseReducer 没有使用 useEffect 更新状态
【发布时间】：2021-04-20 02:09:12
【问题描述】：

我想使用useReducer 和useEffect 获取数据 getPeople 是一个从 https://swapi.dev/documentation#people 返回结果的函数当我控制台日志results 数据正确获取但状态未更新。

我的功能组件：

  export default function App () {
      const [state, dispatch] = useReducer(reducer, initialSate);
    
      useEffect(async () => {
        const { results } = await getPeople();
        dispatch({ type: FETCH_PEOPLE, payload: results });
      }, []);
    
      return (
        <>
          <GlobalStyles/>
          {state.loading
            ? <Loader size={'20px'} />
            : <>
          <Search></Search>
          <People />
          </>
          }
        </>
      );
    }

我的减速器功能：

export const reducer = (state = initialSate, action) => {
  switch (action.type) {
    case FETCH_PEOPLE:
      return {
        ...state,
        loading: false,
        results: action.payload,
        counter: state.counter
      };
    case INCREMENT_COUNTER:
      return {
        ...state,
        loading: true,
        counter: increment(state.counter)
      };
    case DECREMENT_COUNTER:
      return {
        ...state,
        loading: true,
        counter: decrement(state.counter)
      };
    default:
      return state;
  }
};

【问题讨论】：

您是否尝试在减速器内部记录操作？
不要认为这会解决它，但我知道当从 useEffect 调用异步函数调用时，应该将它们放在本地异步函数中。看看这里的这个问题：stackoverflow.com/questions/53332321/…
@hellogoodnight 是的，它包含有效负载：10 个数组
你在哪里使用状态？显示 People 组件的代码，我假设它使用这个数组。
@hellogoodnight 令人惊叹的问题，谢谢我在错误的组件中使用了useEffect，现在解决了，谢谢

标签： javascript reactjs react-hooks

【解决方案1】：

TLDR;

您需要将异步操作包装在 IIFE 中：

useEffect(() => {
    (async() => {
        const { results } = await getPeople();
        dispatch({ type: FETCH_PEOPLE, payload: results });
    })();
}, []);

详情：
如果您在 typescript 中执行 OP 版本，则会出现如下错误：

Argument of type '() => Promise<void>' is not assignable to parameter of type 'EffectCallback'

useEffect 钩子期望返回一个清理函数（可选）。但是如果我们继续使用 OP 的版本，异步函数会使回调函数返回一个 Promise。

【讨论】：

酷，我不知道 IIFE。为什么这行得通，而 OPs 代码却不行？
解决了我在错误的组件中使用了效果 MY BAD 谢谢
@hellogoodnight 在回答中给出了解释
或者更好，getPeople().then(({ results }) => dispatch({ type: FETCH_PEOPLE, payload: results });)。不需要异步，问题解决了。