TypeError：Object.entries 要求输入参数在 React Native 中不能为 null 或未定义

Question

我正在尝试循环访问通过调用 API 获取的对象，但是在将数据设置为状态setNodesData并从中获取数据nodesData之后，但是当我尝试这样做时，我收到一条错误消息： TypeError: Object.entries requires that input parameter not be null or undefined in React Native

我也尝试过for(const i in nodesData)，但仍然收到错误消息expression expected

useEffect(() => {
    if (apiHeaders) {
      axios
        .get(
          "https://test-myways-anfhsya-asq.myways.in/api/****",
          {
            headers: apiHeaders,
          }
        )
        .then((res) => {
          console.log("API Call")
          console.log(res?.data);
          setNodesData(res?.data);
        })
        .catch((err)=>{console.log("error:",err)});
    }
  }, [apiHeaders]);

  return (
    
  
      {
      Object?.entries(nodesData).forEach((i) => (
        <View style={{ padding: 5 }}>
          <View
            style={{
              flexDirection: "row",
              alignItems: "center",
            }}
          >
            <TouchableOpacity
               onPress={(props) => props.navigation.navigate("CoursesPlaylistScreen")}
              style={{
                flexDirection: "row",
                alignItems: "center",
                justifyContent: "space-between",
                flex: 1,
              }}
            >
              <View
                style={{
                  flexDirection: "row",
                  justifyContent: "space-between",
                  flex: 1,
                }}
              >
                <Text
                  style={{
                    fontSize: 16,
                    color: "#000000",
                    fontWeight: "bold",
                  }}
                >
                  {i}
                </Text>
              </View>
            </TouchableOpacity>
          </View>

数据：

{
    "week1": {
        "content": [
            {
                "moduleName": "HTML Crash course",
                "moduleVideos": [
                    {
                        "title": "HTML Crash Course For Absolute Beginners",
                        "link": "https://youtu.be/*****",
                        "duration": "01:00:42"
                    }
                ]
            },
            {
                "moduleName": "CSS Crash course",
                "moduleVideos": [
                    {
                        "title": "CSS Crash Course For Absolute Beginners",
                        "link": "https://youtu.be/*****",
                        "duration": "01:25:11"
                    }
                ]
            },

我只想得到几周的时间，但我遇到了错误，我不知道该怎么做。

Answer 1

问题

该问题很可能发生在初始渲染上。您正在尝试转换undefined为对象条目数组。

const [nodesData, setNodesData] = useState(); // <-- undefined initial state!

...

Object?.entries(nodesData).map( ... // <-- blows up with error

测试

const [nodesData, setNodesData] = useState(); // <-- undefined initial state!

...

Object?.entries(nodesData).map( ... // <-- blows up with error

const nodesData = undefined;
console.log(Object.entries(nodesData)); // error

.map与.forEach

当您更改为时，您的编辑Object?.entries(nodesData).map( ...不会Object?.entries(nodesData).forEach( ...返回任何要渲染的内容，因为.forEach从技术上讲，这是无效返回。恢复该更改以使用.map。

此外，由于条目的每个“值”仍然是一个对象，因此您需要选择要渲染的对象值。如果有任何嵌套数组，它们也需要映射到 JSX。

解决方案

提供有效的初始状态。一个空物体就足够了。

const [nodesData, setNodesData] = useState({});

如果状态稍后nodesData变得未定义，请使用空检查或提供后备值。

• nodesData && Object.entries(nodesData).map( ...
• Object.entries(nodesData || {}).map( ...

理想情况下，您应该保持状态不变，至少始终是一个已定义的对象。

渲染nodesData周键

如果您只需要钥匙，那么您可以：

• 从条目中渲染键（回想一下条目是键值对的数组，即[[key1, value1], [key2, value2], ...]）

   Object.entries(nodesData).map(([week, data]) => (
     <View style={{ padding: 5 }}>
       ...
         <Text .... >
           {week} // "week1", "week2", etc...
         </Text>
       ...
     </View>
  

• 用于获取仅包含键Object.keys的数组

   Object.keys(nodesData).map((week) => (
     <View style={{ padding: 5 }}>
       ...
         <Text .... >
           {week} // "week1", "week2", etc...
         </Text>
       ...
     </View>