带有钩子的琐碎反应本机代码的问题

Question

>更新：

问题 2@NikolayNovikov. 通过将 "setResources({ resources： response.data }(" 替换为 "setResources(response.data("。

问题 1.我无法重现它...

问题描述：

下面的简单示例是从 jsonplaceholder.typicode.com 获取数据，并且由于有 100 个"帖子"和 200 个"待办事项"，因此当您单击这些按钮时，它应该显示 100 和 200。

由于某种我找不到的原因(尴尬，我知道...(，有两个问题：

1. 当我点击"帖子"按钮时，useEffect 被调用了两次(一次使用"待办事项"，一次使用"帖子"，当我单击"待办事项"按钮时，它根本没有被调用。
2. 资源长度未呈现

知道出了什么问题吗？

应用.js：

从 'react' 导入 React， { useState }; 从"反应本机"导入 { 视图、可触摸不透明度、文本、样式表 }; 从 './components/ResourceList' 导入 { 资源列表 }

;console.warn('在应用程序中.js：在 genymotion 中禁用黄框警告"(; console.disableYellowBox = true;

export const App = () => {
const [resource, setResource] = useState('todos');
return (
<View style={{ flex: 1, alignItems: 'center', marginTop: 100 }}>
<Text style={{ fontSize: 20, fontWeight: '500' }}>
The Application has been loaded!
</Text>
<View style={{ flexDirection: 'row', marginTop: 100,
alignItems: 'center', justifyContent: 'center' }}>
<TouchableOpacity onPress={() => setResource('posts')}>
<View style={styles.button}>
<Text style={styles.buttonText}>
Posts
</Text>
</View>
</TouchableOpacity>
<View style={{ width: 20 }} />
<TouchableOpacity onPress={() => setResource('todos')}>
<View style={styles.button}>
<Text style={styles.buttonText}>
Todos
</Text>
</View>
</TouchableOpacity>
</View>
<ResourceList resource={resource} />
</View>
);
}
const styles = StyleSheet.create({
buttonText: {
color: 'black',
fontSize: 20
},
button: {
backgroundColor: '#a8a',
justifyContent: 'center',
alignItems: 'center',
paddingVertical: 5,
paddingHorizontal: 10,
borderRadius: 2
}
});

资源列表.js：

import React, { useState, useEffect } from 'react';
import { View, Text } from 'react-native';
import axios from 'axios';
// export const ResourceList = (props) => {
export const ResourceList = ({ resource }) => { // restructured props
const [resources, setResources ] = useState([]);
const fetchResource = async(resource) => {
console.log('+++ ResourceList/fetchResource calling axios. path:',
`https://jsonplaceholder.typicode.com/${resource}`);
const response = await axios.get(`https://jsonplaceholder.typicode.com/${resource}`);
console.log(response);
setResources({ resources: response.data })
}
useEffect(() => {
console.log('--- ResourceList/useEffect. resource: ', resource);
fetchResource(resource);
}, [resource]);
return (
<View style={{ flex: 1, alignItems: 'center', marginTop: 100 }}>
<Text style={{ fontSize: 20, fontWeight: '500' }}>
{resources.length}
</Text>
</View>
);
}

Answer 1

在你ResourceList.js组件setResources应该不同，请尝试以下操作：

setResources(response.data)