博览:我如何从Django Rest Framework中获取数据？

Question

我用的是世博会5.0.1。我有一个很好的API。

这是我的整个App.js：

import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, FlatList } from 'react-native';

const [data, setData] = useState([{title: "First title"}]);

  useEffect(() => {
    fetch('http://192.168.1.68:89/cards/', {
      method: "GET"
    })
    .then(resp => resp.json())
    .then(data => {
      console.log(data)
    })
    .catch(error => console.log("Error is : ", error))
  }, [])

const renderData = (item) => {
  return(
    <View style={styles.view}>
      <Text>{item.user}</Text>
      <Text>{item.is_suspended}</Text>
      <Text>{item.id}</Text>
    </View>
  ) 
}

export default function App() {

  return (
    <View style={styles.view}>
      <FlatList
      data = {data}
      renderItem={({item}) => {
        return renderData(item)
      }}
      keyExtractor={item => item.user}
      />      
    </View>
  );
}

const styles = StyleSheet.create({
  Bold: {fontWeight: '600',},
  Red: {color: 'red'}, 
  px30: {fontSize: '20px',},
  view: {justifyContent: 'center', textAlign: 'center', paddingTop: '20px',},
})

我甚至不能从我的“..catch”中得到错误。以下是错误：Error1

下面是我将useEffect代码放入函数应用程序的时候：Error2

有人能帮我从Rest Api那里得到数据吗？

Answer 1

您应该在功能组件中使用React状态挂钩。所以你才会犯这个错误。试一试这段代码。

import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, FlatList } from 'react-native';
export default function App() {

const [data, setData] = useState([{title: "First title"}]);

  useEffect(() => {
    fetch('http://192.168.1.68:89/cards/', {
      method: "GET"
    })
    .then(resp => resp.json())
    .then(data => {
      console.log(data)
    })
    .catch(error => console.log("Error is : ", error))
  }, [])

const renderData = ({item, index}) => {
  return(
    <View style={styles.view}>
      <Text>{item.user}</Text>
      <Text>{item.is_suspended}</Text>
      <Text>{item.id}</Text>
    </View>
  ) 
}

  return (
    <View style={styles.view}>
      <FlatList
      data = {data}
      renderItem={renderData}
      keyExtractor={(i, k) => k.toString()}
      />      
    </View>
  );
}

const styles = StyleSheet.create({
  Bold: {fontWeight: '600',},
  Red: {color: 'red'}, 
  px30: {fontSize: '20px',},
  view: {justifyContent: 'center', textAlign: 'center', paddingTop: '20px',},
})

编辑

我注意到你的风格也错了。代之以

const styles = StyleSheet.create({
  Bold: {fontWeight: 600,},
  Red: {color: 'red'}, 
  px30: {fontSize: 20,},
  view: {justifyContent: 'center', textAlign: 'center', paddingTop: 20,},
})

React本机不接受“px”作为样式