对象作为React子对象无效-React Hooks

Question

我正在尝试从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"
}
}

Answer 1

确实如此，您可能需要这样做。

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

Answer 2

我认为如果数据是数组，你可以这样映射：

return (
<View style={styles.container}>
{
data.map((item) => <Text>{item.project_ID}</Text>)
}
</View>
)

Answer 3

这里的<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，则&&将仅评估第二部分。这是一种常见的做法，特别是当您有没有初始状态的异步调用时。