React native 带有钩子的简单react本机代码的问题 更新：

问题2。通过将“setResources（{resources:response.data}）”替换为 “setResources（response.data）”

问题1。我无法复制它

问题描述： 下面这个简单的例子是从中获取数据，因为有100个“帖子”和200个“待办事项”，所以当您单击这些按钮时，它应该显示100和200

由于一些我找不到的原因（我知道很尴尬…），有两个问题：

当我点击“posts”按钮时，useEffect会被调用两次（一次调用“todos”，一次调用“posts”，当我点击“todos”按钮时，根本不会调用它

未呈现resource.length

你知道怎么了吗

App.js： 从“React”导入React，{useState}； 从“react native”导入{View，TouchableOpacity，Text，StyleSheet}； 从“./components/ResourceList”导入{ResourceList}

console.warn（“在App.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
  }
});

export const App=（）=>{
const[resource，setResource]=useState（'todos'）；
返回(
应用程序已加载！
setResource（'posts'）}>
帖子
setResource（'todos'）}>
待办事项
);
}
const styles=StyleSheet.create({
按钮文字：{
颜色：'黑色'，
尺寸：20
},
按钮：{
背景颜色：“#a8a”，
为内容辩护：“中心”，
对齐项目：“居中”，
填充垂直：5，
水平方向：10，
边界半径：2
}
});

ResourceList.js：

import React，{useState，useffect}来自“React”；
从“react native”导入{View，Text}；
从“axios”导入axios；
//导出常量资源列表=（道具）=>{
export const ResourceList=（{resource}）=>{//restructured props
const[resources，setResources]=useState（[]）；
常量fetchResource=async（资源）=>{
console.log（'++ResourceList/fetchResource调用axios.path:'，
`https://jsonplaceholder.typicode.com/${resource}`）；
const response=等待axios.get(`https://jsonplaceholder.typicode.com/${resource}`）；
控制台日志（响应）；
setResources（{resources:response.data}）
}
useffect（（）=>{
console.log（'--ResourceList/useffect.resource:'，resource）；
获取资源（资源）；
}，[资源]；
返回(
{resources.length}
);
}
在您的
ResourceList.js中
组件
setResources
应该不同，请尝试以下操作：

setResources(response.data)

setResources(response.data)