Question

我正在用react native编程这个简单的应用程序，但是当我尝试发出axios请求时，我无法将url以及从商店获取的“ user”和“ repo” const连接起来。

console.log（apiurl）给我“ https://api.github.com/repos/undefined/undefined”

但是如果我输入console.log（user），它会给我用户const的实际值。

如何使用用户和存储库常量访问创建axios请求？

import {
  View,
  Text,
  StyleSheet
} from 'react-native';
import { useSelector, useDispatch} from 'react-redux';
import { NavigationContainer, useNavigation } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import axios from 'axios';
import setResponse from '../actions';
import NetInfo from "@react-native-community/netinfo";


export default function homeScreen() {

  const apiurl = 'https://api.github.com/repos/' + user + '/' + repo;
  const user = useSelector(state => state.user);
  const repo = useSelector(state => state.repo);
  const response = useSelector(state => state.response)
  const navigation = useNavigation();
  const dispatch = useDispatch();

  const [state, setState] = useState({
      color: "",
      isConnected: true,
  });

  const check = () => {
      console.log(user);
      console.log(repo);
      console.log(apiurl);
      axios.get('https://api.github.com/repos/'+ user+ '/' + repo).then(res => {
        console.log(res.data.name);
        dispatch(setResponse(res.data.message));
      }).catch(error => console.log(error));

      if (response === "Not Found") {
        setState(prevState => {
          return { ...prevState, color: "#ffacac" };
        });
      }
      else if (state.isConnected == false) {
        dispatch(setResponse("disconnected"));
        setState(prevState => {
          return { ...prevState, color: "#ffacac" };
        });
      }
      else if (response == null) {
        setState(prevState => {
          return { ...prevState, color: "#caffda" };
        });
      }
  }

  return (
    <View style={{flex: 1, backgroundColor: state.color}}>
        <View style={styles.titleContainer}>
            <Text style={styles.title}>Set the repository address</Text>
        </View>
        <View style={styles.githubLink}>
            <Text style={styles.link1}>github.com</Text>
            <View style={styles.inputContainer}>
                <Text style={styles.link1}>/</Text>
                <Text style={styles.link2} onPress={() => navigation.navigate('User')} >{user}</Text>
            </View>
            <View style={styles.inputContainer}>
                <Text style={styles.link1}>/</Text>
                <Text style={styles.link2} onPress={() => navigation.navigate('Repo')} >{repo}</Text>
            </View>
        </View>
        <View style={styles.buttonContainer}>
            <Text style={styles.button} onPress={check}>CHECK</Text>
        </View>
    </View>
  );
}

const styles = StyleSheet.create({
  titleContainer: {
    flex: 1.5,
    justifyContent: "center",
    paddingLeft: 12,
  },
  title: {
    fontSize: 28,
    fontFamily: "OpenSans-SemiBold",
  },
  githubLink: {
    flex: 3,
    paddingLeft: 12,
    justifyContent: "center",
  },
  inputContainer: {
    flexDirection: "row",
  },
  link1: {
    fontSize: 38,
    fontFamily: "OpenSans-Regular",
  },
  link2: {
    fontSize: 38,
    fontFamily: "OpenSans-Regular",
    color: "grey"
  },
  buttonContainer: {
    flex: 5.5,
    justifyContent: "flex-end",
    alignItems: "flex-end",
    padding: 8,
  },
  button: {
    fontSize: 25,
    fontFamily: "OpenSans-Bold",
  }
});

Answer 1

首先，您需要确保状态下的选择器数据不为空。在实际执行请求之前，您可以检查值是否为空/未定义。

我还建议您现在以更结构化的方式处理请求。 Redux Toolkit有一些不错的示例，这些示例用于构造代码以使其更易于维护。参见their site

useSelector返回一个未定义的值，但是我无法访问该值

1 个答案: