Javascript 如何使用React从action.js中的API获取响应值

我已经阅读了很多关于这方面的例子，但没有得到解决问题的结果，我想通过使用localhost获取MySQL数据库中的值，用PHP编写代码并以JSON格式返回值，例如

[
    {"id":"7",
     "name":"Sammy",
     "address":"New York",
     "age":"42"}
]

使用此格式，我可以在GetApi.js中使用此代码获取数据

class GetApi {
 static getAllUsers() {

return fetch('http://192.168.1.199/App/show_all_data.php')
        .then((response) => {
            if (!response.ok) {
                throw Error(response.statusText);
            }

            dispatch(itemsIsLoading(false));

            return response;
        })
        .then((response) => response.json())
        .then((items) => dispatch(itemsFetchDataSuccess(items)))
        .catch(() => dispatch(itemsHasErrored(true)));
  }
}

export default GetApi;

这里是action.js

import GetApi from '../../api/GetApi';

export function itemsHasErrored(bool: boolean) {
  return {
    type: "ITEMS_HAS_ERRORED",
    hasErrored: bool
  };
}
export function itemsIsLoading(bool: boolean) {
  return {
    type: "ITEMS_IS_LOADING",
    isLoading: bool
  };
}
export function itemsFetchDataSuccess(items: Object) {
  return {
    type: "ITEMS_FETCH_DATA_SUCCESS",
    items
  };
}
export function itemsFetchData(url: any) {
  return function(dispatch) {
    return GetApi.getAllUsers().then(items => {
    dispatch(itemsFetchDataSuccess(items));
    dispatch(itemsIsLoading(false));
   }).catch(error => {
  throw(error);
    });
  };
}

这是reducer.js

const initialState = {
  isLoading: true,
  hasErrored: false,
  items: []
};
export default function(state: any = initialState, action: Function) {
  switch (action.type) {
    case "ITEMS_HAS_ERRORED":
      return { ...state, hasErrored: action.hasErrored };
    case "ITEMS_IS_LOADING":
      return { ...state, isLoading: action.isLoading };
    case "ITEMS_FETCH_DATA_SUCCESS":
      return { ...state, items: action.items };
    default:
      return state;
  }
}

在index.js中调用action.js函数

import { itemsFetchData } from "../../actions";
...
all codings that were not related with calling action.js
...
const navigation = this.props.navigation;
  let items = this.props.items;
  if (items.hasOwnProperty('item')) {
    items = items.item
  }
  return (
    <List
            dataArray={this.props.items}
            renderRow={(
              data 
            ) =>
              <ListItem icon style={styles.listitem}>
                <Left>
                <Text>
                  {data.name}
                  </Text>

                </Left>

                <Right>
                  <Text>
                    {data.address}
                  </Text>
                </Right>
              </ListItem>}
          />
  );

  function bindAction(dispatch) {
   return {
  fetchData: url => dispatch(itemsFetchData(url))
  };
 }
  const mapStateToProps = state => ({
  items: state.homeReducer.items,
  hasErrored: state.homeReducer.hasErrored,
  isLoading: state.homeReducer.isLoading
 });
 export default connect(mapStateToProps, bindAction)(ShowData);

我在运行代码时没有得到任何结果，只是显示了加载图标。即使我设置isLoading:false，主菜单也会在没有数据的情况下显示

---

我只是尽量减少index.js中的代码，因为它太长了，无法在这里发布。如果有必要，我会在下一篇评论中这样做。

我建议使用epics，下面是一个供您遵循的示例链接

您可以查看来自epic的操作和数据ajax调用，以及它如何连接回操作

---

注意：这里使用的是Axios而不是fetch api…

检查控制台，我认为存在一些与分派相关的错误，因为当前代码分派将无法在GetApi类的getAllUsers方法中访问。感谢快速响应，是的，如果出现错误但没有，那将非常好。刚刚在中完成javascript包的构建…ms也许我在调度时必须输入一个错误代码？感谢您的建议，不知何故，我只需要使用fetch方法生成一个代码。我将来会学习axios代码。