Question

更新：

问题2通过将“ setResources（{resources：response.data}）”替换为“解决”（感谢@NikolayNovikov答复）   “ setResources（response.data）”。

问题1.仍在发生...

问题描述：

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

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

当我单击“帖子”按钮时，useEffect会被调用两次（一次是“ todos”，一次是“ posts”，而当我单击“ todos”按钮时，它根本不会被调用。
resource.length未呈现

有什么想法吗？

App.js：

从'react'导入React，{useState}；从'react-native'导入{View，TouchableOpacity，Text，StyleSheet}; 从'./components/ResourceList'导入{ResourceList};

console.warn（'In 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
  }
});

ResourceList.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)

用钩子对本机代码进行微不足道的反应的问题

更新：

问题描述：

App.js：

ResourceList.js：

1 个答案: