我正在尝试从rest端点获取所有项目。但不幸的是,我犯了一个错误。有人能看看我的代码,告诉我哪里出了问题吗。这是JSON数据。我用的是React Hooks。以及从本地rest端点获取数据以获取项目详细信息。
const [data, setData] = useState();
const [isLoading, setIsLoading] = useState(false);
const [isError, setIsError] = useState(false);
useEffect(() => {
const fetchData = async () => {
setIsError(false);
setIsLoading(true);
try {
const result = await axios('http://192.168.0.176:8080/projectses');
setData(result.data);
} catch (error) {
setIsError(true);
}
setIsLoading(false);
};
fetchData();
}, []);
const { colors } = useTheme();
const theme = useTheme();
return (
<View style={styles.container}>
<Text>{data}</Text>
</View>
);
"project_ID" : 2,
"project_NAME" : "Project B",
"_links" : {
"self" : {
"href" : "http://192.168.0.176:8080/projectses/2"
},
"projects" : {
"href" : "http://192.168.0.176:8080/projectses/2"
}
}
确实如此,您可能需要这样做。
return (
<View style={styles.container}>
<Text>{data.project_ID}</Text>
<Text>{data.project_NAME}</Text>
</View>
)
在此之前还要添加一些防护装置。
if (!data) return <Text>No data!</Text>;
if (isError) return <Text>Something went wrong!</Text>;
我认为如果数据是数组,你可以这样映射:
return (
<View style={styles.container}>
{
data.map((item) => <Text>{item.project_ID}</Text>)
}
</View>
)
<Text>{data}</Text>
数据是Text的子级,不能将普通对象作为子级添加到函数组件中。
由于端点应该获取一个项目数组,因此应该将数据初始化为一个空数组const [data, setData] = useState([]);
,并且在视图中可以进行映射。如果您初始化为null,您将得到一个错误,因为在初始装载时,您将在null上调用map函数,而null没有map函数。
现在您可以迭代您的数组了。您应该为每个密钥提供一个唯一的密钥标识符。
{
data.map(project => <Text key={project.project_ID}>{project.project_NAME}</Text>)
}
如果您的数据状态为null或未定义,则需要先进行验证:
{
data && data.map(project => <Text key={project.project_ID}>{project.project_NAME}</Text>)
}
如果数据评估为true,则&&
将仅评估第二部分。这是一种常见的做法,特别是当您有没有初始状态的异步调用时。