javascript - TypeError : Object. 条目要求输入参数在 React Native 中不为空或未定义

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 = undefined;
console.log(Object.entries(nodesData)); // error

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

.map 与 .forEach

当您将 Object?.entries(nodesData).map( ... 更改为 Object?.entries(nodesData).forEach( ... 时，您的编辑获胜't return anything to be rendered as .forEach 在技术上是无效的返回。将更改恢复为使用 .map。

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

解决方案

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

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

并且如果 nodesData 状态稍后变为未定义的偶然机会，请使用 null 检查或提供回退值。

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

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

渲染 nodesData 周键

如果您只需要 key ，那么您可以:

• 从条目中呈现键(回想一下，条目是一个键值对数组，即 [[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>