gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 16:04:55 26 4
gpt4 key购买 nike

我正在尝试遍历通过调用 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"
}
]
},

我只想得到几周,但我收到错误,我不知道该怎么做。

最佳答案

问题

问题很可能发生在初始渲染上。您正在尝试将 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>

关于javascript - TypeError : Object. 条目要求输入参数在 React Native 中不为空或未定义,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69694731/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com