对象无效作为React子-React Hooks

时间:2020-07-28 13:23:45

标签: reactjs react-native react-hooks

我正在尝试从其他端点获取所有项目。但是不幸的是,我得到一个错误。有人可以看看我的代码,然后告诉我我要去哪里了。这是JSON数据。我正在使用React Hooks。然后从本地其余端点获取数据以获取项目详细信息。

    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"

    }

  }

3 个答案:

答案 0 :(得分:0)

是的,您可能需要执行类似的操作。

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

答案 1 :(得分:0)

我认为如果数据是数组,则可以这样映射:

parser.add_argument('-csv', nargs='+', help=".csv file(s)")
args = parser.parse_args()
if len(args.csv) == 1:
   # one files
else:
   # many files

答案 2 :(得分:0)

$ ./gradlew clean a:compileFoobar **** Project a depends on b => create dependency between task ':a:compileFoobar' to task ':b:jar' > Task :a:clean > Task :b:clean > Task :b:compileFoobar > Task :b:compileJava NO-SOURCE > Task :b:processResources NO-SOURCE > Task :b:classes UP-TO-DATE > Task :b:jar > Task :a:compileFoobar 数据是Text的子级,您不能将纯对象作为子级添加到功能组件中。

由于端点应获取项目数组,因此应将数据初始化为空数组<Text>{data}</Text>,并在视图中可以映射。如果将其初始化为null,则会收到错误消息,因为在初始安装时,您将在null上调用map函数,而null没有map函数。

现在您可以迭代数组。您应该为每个密钥标识符赋予唯一的密钥标识符。

const [data, setData] = useState([]);

如果您将数据状态设置为null或undefined,则需要事先进行验证:

{
  data.map(project => <Text key={project.project_ID}>{project.project_NAME}</Text>)
}

{ data && data.map(project => <Text key={project.project_ID}>{project.project_NAME}</Text>) } 仅在数据评估为true时评估第二部分。这是一种常见的做法,特别是当您进行异步调用而没有初始状态时。