与 useContext 一起使用时，Usereducer 状态始终未定义答案

【问题标题】：Usereducer state is alway undefined when used with useContext与 useContext 一起使用时，Usereducer 状态始终未定义
【发布时间】：2021-08-22 07:15:02
【问题描述】：

我正在尝试将 useReduce 与 useContext 一起使用，当我在 reducer 中控制值时，我在控制台中获取了一个对象数组，但是当我尝试从另一个组件访问状态时，我得到了状态未定义。 State.map() 完全为空。

这是我的代码

App.js

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

import Uploadproject from './Uploadproject';
import Getprojects, { projectget } from './Getprojects';
import reducer from './reducer/Usereducer';

export const Contextstate = createContext();

const App = () => {
  const initialvalue = null;
  const [state, dispatch] = useReducer(reducer, initialvalue);

  const updatestate = async () => {
    const data = await projectget();
    dispatch({ type: 'add', payload: 'from app.js' });
  };

  useEffect(() => {
    updatestate();
  }, []);

  return (
    <>
      <Contextstate.Provider value={{ state, dispatch }}>
        <Uploadproject />
        <Getprojects />
      </Contextstate.Provider>
    </>
  );
};

export default App;

Usereducer.js

import { projectget } from '../Getprojects';

const reducer = (state, action) => {
  if (action.type === 'add') {
    projectget().then((result) => {
      console.log(result);
      // state = [ ...result]
      state = result;
      console.log(state);
      return state;
    });
  }
};
export default reducer;

Getprojects.js

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

import { Contextstate } from './App';

const Getprojects = () => {
  const { state, dispatch } = useContext(Contextstate);
  const getstate = () => {
    dispatch({ type: 'add', payload: 'from getprojects' });
  };

  useEffect(() => {
    getstate();
  }, []);

  console.log(state);

  return (
    <>
      <div>
        <h1>Projects</h1>
        {state &&
          state.map((cur) => {
            return (
              <div key={cur._id}>
                <h1>{cur.title}</h1>
                <p>{cur.description}</p>
                <button
                  onClick={() => {
                    deletproject(cur._id);
                  }}
                >
                  Delete
                </button>
              </div>
            );
          })}
      </div>
    </>
  );
};

export default Getprojects;

当我尝试从 Getprojects 组件访问状态时，它的值是未定义的。但是如果我在减速器内部，控制台会得到一个对象数组。在任何其他组件中，状态是未定义的。有什么想法？？？

【问题讨论】：

Reducer 函数是同步的，它们不能使用异步代码。 projectget 是什么？

标签： reactjs react-redux react-hooks use-context use-reducer

【解决方案1】：

如果你想使用 redux 在你的应用程序中处理异步逻辑，你应该选择Async Redux Middleware 包之一

redux-thunk（更容易配置，适合小型项目）
redux 传奇
redux-observable 等

或者您可以只使用useEffect 并仅向其发送结果操作。例如：

  useEffect(() => {
    dispatch(getProjectActionStart());
    projectget()
      .then((result) => {
        console.log(result);
        // state = [ ...result]
        state = result;
        console.log(state);

        dispatch(getProjectActionStart(state));
        return state;
      })
      .catch(() => {
        dispatch(getProjectActionFailed());
      });
  }, []);

【讨论】：