我正在嘗試遍歷從呼叫 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"
                    }
                ]
            },

我只想得到幾周但我收到錯誤，我不知道該怎么做。

uj5u.com熱心網友回復：

改變：

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

到：

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

uj5u.com熱心網友回復：

問題

該問題很可能發生在初始渲染中。您正在嘗試轉換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>
  

標籤：javascript 反应 反应原生 接口 目的

上一篇：如何不在我的串列中包含破壞我的回圈的值

下一篇：在反應中重用順風組件的簡單方法