Reactjs React-Native-fetch-won'；你不能和redux一起工作吗？

我正在尝试对我自己在NodeJS中编写的后端进行一个简单的fetch调用。尽管如此，我还是很难让fetch开始工作。我正在使用Redux Thunk和React Native中的Redux来整理状态和道具，以便创建一个自动导航的登录/注册视图。我的行为是这样的：

actions.js

import {
    LOGIN,
    LOGIN_SUCCESS,
    LOGIN_FAILED
} from '../constants/constants'

export function loginAPI() {
    return (dispatch) => {
      dispatch(userLogin())
      fetch('http://localhost:3000/users/')
      .then(data => data.json())
      .then(json => {
        console.log('json:', json)
        dispatch(userLoginSuccess(json.success))
      })
      .catch(err => dispatch(userLoginFailed(err)))
    }
  }

function userLogin() {
    return {
        type: LOGIN,
    }
}

function userLoginSuccess(token) {
    return {
        type: LOGIN_SUCCESS,
        token,
    }
}

function userLoginFailed() {
    return {
        type: LOGIN_FAILED,
    }
}

import React from 'react'
import { TouchableHighlight, View, Text, StyleSheet } from 'react-native'

import { connect } from 'react-redux'
import { loginAPI } from '../actions/actions'

let styles

const Login = (props) => {
  const {
    container,
    text,
    button,
    buttonText
  } = styles

  const { token, isFetching } = props.user;
  console.log('Token: ', props.token);

  return (
    <View style={container}>
      <Text style={text}>Redux Example</Text>
      <TouchableHighlight style={button} onPress={() => props.loginAPI()}>
        <Text style={buttonText}>Login</Text>
      </TouchableHighlight>
      {
        isFetching && <Text>Loading</Text>
      }
      {
        token ? (<Text>Name: {token}</Text>) : null
      }
    </View>
  )
}

styles = StyleSheet.create({
  container: {
    marginTop: 100,
    paddingLeft: 20,
    paddingRight: 20
  },
  text: {
    textAlign: 'center'
  },
  button: {
    height: 60,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#0b7eff'
  },
  buttonText: {
    color: 'white'
  }
})

function mapStateToProps (state) {
  return {
    user: state.user
  }
}

function mapDispatchToProps (dispatch) {
  return {
    loginAPI: () => dispatch(loginAPI())
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Login)

import { createStore, applyMiddleware } from 'redux'
import app from '../reducers'
import thunk from 'redux-thunk'

export default function configureStore() {
  let store = createStore(app, applyMiddleware(thunk))
  return store
}

user.js（reducer）

最后，这是我的呈现页面

Login.js

import {
    LOGIN,
    LOGIN_SUCCESS,
    LOGIN_FAILED
} from '../constants/constants'

export function loginAPI() {
    return (dispatch) => {
      dispatch(userLogin())
      fetch('http://localhost:3000/users/')
      .then(data => data.json())
      .then(json => {
        console.log('json:', json)
        dispatch(userLoginSuccess(json.success))
      })
      .catch(err => dispatch(userLoginFailed(err)))
    }
  }

function userLogin() {
    return {
        type: LOGIN,
    }
}

function userLoginSuccess(token) {
    return {
        type: LOGIN_SUCCESS,
        token,
    }
}

function userLoginFailed() {
    return {
        type: LOGIN_FAILED,
    }
}

import React from 'react'
import { TouchableHighlight, View, Text, StyleSheet } from 'react-native'

import { connect } from 'react-redux'
import { loginAPI } from '../actions/actions'

let styles

const Login = (props) => {
  const {
    container,
    text,
    button,
    buttonText
  } = styles

  const { token, isFetching } = props.user;
  console.log('Token: ', props.token);

  return (
    <View style={container}>
      <Text style={text}>Redux Example</Text>
      <TouchableHighlight style={button} onPress={() => props.loginAPI()}>
        <Text style={buttonText}>Login</Text>
      </TouchableHighlight>
      {
        isFetching && <Text>Loading</Text>
      }
      {
        token ? (<Text>Name: {token}</Text>) : null
      }
    </View>
  )
}

styles = StyleSheet.create({
  container: {
    marginTop: 100,
    paddingLeft: 20,
    paddingRight: 20
  },
  text: {
    textAlign: 'center'
  },
  button: {
    height: 60,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#0b7eff'
  },
  buttonText: {
    color: 'white'
  }
})

function mapStateToProps (state) {
  return {
    user: state.user
  }
}

function mapDispatchToProps (dispatch) {
  return {
    loginAPI: () => dispatch(loginAPI())
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Login)

import { createStore, applyMiddleware } from 'redux'
import app from '../reducers'
import thunk from 'redux-thunk'

export default function configureStore() {
  let store = createStore(app, applyMiddleware(thunk))
  return store
}

---

Fortforwarding from 2995-3005 UDP/TCP都解决了这个问题，并且使用了我的IPv4地址而不是本地主机。

您的API上有GET/users吗？通常，大多数开发人员使用用户名和密码在API上发布帖子，并获得令牌。你好像做了一个测试。是的，这是我做的一个测试。其余部分需要哈希信息才能从中获取令牌，因此我认为这样做更容易。它返回{success:true}可能是因为服务器托管在本地吗？使用fetch时是否存在一些限制，您只能调用https DNS？是的，可能是因为它是localhost。localhost可能指向模拟器或设备本身。如果您在同一网络上，可以尝试使用专用IP。已修复。Fortforwarding 2995-3005，并在执行post调用时将内容更改为JSON修复了此问题。