代码之家 › 专栏 › 技术社区 › Deadpool

从服务文件发送的数据在Reducer状态下未更新

es6-promise async-await reactjs javascript

Deadpool · 技术社区 · 6 年前

我好像遇到了一个奇怪的问题。问题是我正在尝试创建一个API命中(在服务文件中),它反过来提供一些数据(它正在工作),这个数据将在我的 reducer1.js

减速器1.js ,为什么更新后的状态不会由“GET_List”操作类型返回?有人能看出什么问题吗?

const global = {
  getActressList: async function(){
    const response = await fetch("http://localhost:2000/api/actressList");
    const data = await response.json();
    return data;
  }
}

export default global;

减速器1.js

import global from '../../services/index';

const initialState = {
  data: [
    {
      id: 1, 
      name: "Aishwarya Rai",
      src: "/assets/img/aishwarya.png"
    }
  ]
};

function reducer1(state = initialState, action) {

  switch (action.type) {

    case "GET_LIST": {
      const data = global.getActressList();
      data.then((res)=> {
        return {
          ...state,
          data: res
        }
      })
    }
    default:
      return state;
  }
}

export default reducer1;

结果:

1 回复 | 直到 6 年前

Rostyslav 6 年前

您是从一个承诺中返回,而不是从reducer函数返回:

function reducer1(state = initialState, action) {
  switch (action.type) {
    case "GET_LIST": {
      const data = global.getActressList();
      data.then((res) => {
        // here you are returning from a promise not from a reducer function
        return {
          ...state,
          data: res,
        };
      });
    }
    default:
      return state;
  }
}

reducer中的代码应该是这样同步的:

function reducer1(state = initialState, action) {
  switch (action.type) {
    case "GET_LIST": {
      return {
        ...state,
        data: action.payload,
      };
    }
    default:
      return state;
  }
}

function YourComponent() {
  const dispatch = useDispatch();
  const data = useSelector(state => state.data)

  useEffect(() => {
    const data = global.getActressList();
    data.then((res) => {
      dispatch({type: 'GET_LIST', payload: res});
    });
  }, [])

  ...
}

编辑

componentDidMount 像这样的生命周期挂钩:

class YourComponent extends Component {
  state = { data: [] };

  componentDidMount() {
    const data = global.getActressList();
    data.then((res) => {
      dispatchYourAction({type: 'GET_LIST', payload: res});
    });
  }

  ...
}

推荐文章

dspyz · 如何将等待“tokio::sync::watch::Receiver”变为“Some”?

1 年前

Rami Dhouib · Flutter:如果等待时间超过2秒,则执行操作

1 年前

byles1506 · 不理解异步等待执行顺序

1 年前

user2741831 · 等待执行的顺序在节点中没有意义

1 年前

Andrew Cheong · 如何在半异步情况下使用Javascript async/await?(例如,在String.replace中)[重复]

1 年前

user1233894 · 尝试从全局函数传递值

1 年前

cluster1 · 任务(小写)与任务(大写)

1 年前

haru · 为什么我的代码在加载页面时两次获取相同的项目?

1 年前

Ajeeth ram · 在“wait http.get(url)”调用后,控件退出函数

1 年前

Apahdos · Argument:绑定一行lambda表达式。调用async Task方法时是否需要异步?

1 年前