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

变化：

… Object?.entries(nodesData).map((i) => ( …

收件人：

… nodesData && Object.entries(nodesData).map((i) => ( …

Answer 2

问题

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

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

...

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

测试

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

const nodesData = {};
console.log(Object.entries(nodesData)); // []

.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>