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

【问题标题】：useSelector returns an undefined, but I'm not able to access to the valueuseSelector 返回一个未定义的值，但我无法访问该值
【发布时间】：2020-07-04 12:43:55
【问题描述】：

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

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

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

如何使用 user 和 repo 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",
  }
});

【问题讨论】：

标签： reactjs react-native redux axios

【解决方案1】：

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

我还建议您现在处理请求的方式更加结构化。 Redux Toolkit 有一些很好的示例来构建代码以使其更易于维护。见their site

【讨论】：