Question

我已经阅读了很多这方面的例子并没有解决我的问题，我想通过使用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中的代码，因为它在这里发布的时间太长了。如果有必要，我会在下一条评论中这样做。

Answer 1

我建议使用史诗，下面是一个示例链接供您遵循。

Epic Example

您可以查看ajax从epic调用的操作和数据以及它如何连接回动作。

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

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

1 个答案: