axios 即使API返回JSON值,也要在React Native Screen中继续获得空数组

cig3rfwq  于 2023-08-04  发布在  iOS
关注(0)|答案(1)|浏览(82)

感谢大家花时间阅读并试图提供帮助。我正在我的应用程序中构建一个新的屏幕,我正在react native中构建。在新屏幕中,我调用了一个我在PHP中构建的API,当在Postman中测试该API时,它工作正常并返回下面的JSON:

{
    "status": "200",
    "message": "success",
    "data": [
        {
            "driverName": "Max Verstappen",
            "driverPoints": {
                "0": "281"
            },
            "driverPosition": {
                "0": "1"
            }
        },
        {
            "driverName": "Sergio Pérez",
            "driverPoints": {
                "0": "171"
            },
            "driverPosition": {
                "0": "2"
            }
        },
        {
            "driverName": "Fernando Alonso",
            "driverPoints": {
                "0": "139"
            },
            "driverPosition": {
                "0": "3"
            }
        }
    ]
}

字符串
但是当我尝试使用axios在屏幕中调用它时,如果我控制响应,我会得到json值,但是当我尝试用数据填充特定数组时,我一直得到下面的错误。请我需要你的帮助来解决这个问题,这是真的令人沮丧,它已经一整天,我试图解决这个问题和调试。
错误:类型错误:无法读取未定义的属性“driverName”
即使当我控制台打印response.data.data时,我得到了这个:

response:  Array [
  Object {
    "driverName": "Max Verstappen",
    "driverPoints": Object {
      "0": "281",
    },
    "driverPosition": Object {
      "0": "1",
    },
  },
  Object {
    "driverName": "Sergio Pérez",
    "driverPoints": Object {
      "0": "171",
    },
    "driverPosition": Object {
      "0": "2",
    },
  }
]


下面是我的屏幕代码:

export default function StandingsScreen() {
    const theme = useContext(themeContext);
    const [driverStandingsList, setDriverStandingsList] = useState([]);
    const [constructorStandingsList, setConstructorStandingsList] = useState(
        []
    );
    const [driversTable, setDriversTable] = useState([]);
    const [constructorsTable, setConstructorsTable] = useState([]);
    const [isLoading, setIsLoading] = useState(false);
    const [darkModeOn, setDarkModeOn] = useState(false);

    const retrieveDarkMode = async () => {
        try {
            const jsonValue = await AsyncStorage.getItem('darkModeOn');

            if (jsonValue !== null) {
                const parsedValue = JSON.parse(jsonValue);
                setDarkModeOn(parsedValue);
            }
        } catch (e) {
            // error reading value
            console.log('error: ', e);
        }
    };

    const loadDriversStandings = () => {
        setIsLoading(true);

        const url =
            baseApiUrl + '/standings/driver-standings-get.php?' + apikey;

        axios
            .get(url)
            .then((response) => {
                //console.log('response: ', response.data.data[0].driverName);
                setDriverStandingsList(response.data.data);
                console.log('driverStandingsList: ', driverStandingsList);
                setIsLoading(false);
            })
            .catch((error) => console.log(error));
    };

    const renderLoader = () => {
        return isLoading ? (
            <View style={styles.loaderStyle}>
                <ActivityIndicator size="large" color="#aaa" />
            </View>
        ) : null;
    };

    // this useEffect execute the function only once
    useEffect(() => {
        loadDriversStandings();
    }, []);

    useFocusEffect(
        React.useCallback(() => {
            retrieveDarkMode();

            return () => {};
        }, [])
    );

    const styles = StyleSheet.create({
        loaderStyle: {
            marginVertical: 16,
            alignItems: 'center',
        },
        buttonContainer: {
            marginTop: 5,
            marginBottom: 20,
            padding: 0,
            flexDirection: 'row',
        },
        button: {
            width: '50%',
            marginRight: 0,
        },
        screen: {
            flex: 1,
            padding: 10,
            backgroundColor: theme.backgroundColor,
        },
        tableTitles: {
            flexDirection: 'row',
            justifyContent: 'center',
            alignItems: 'center',
        },
    });

    return (
        <View style={styles.screen}>
            <View style={styles.buttonContainer}>
                <View style={styles.button}>
                    <Button
                        title="Drivers"
                        onPress={() => {
                            setDriversTable(true);
                        }}
                    />
                </View>
                <View style={styles.button}>
                    <Button
                        title="Constructors"
                        onPress={() => {
                            setConstructorsTable(true);
                        }}
                    />
                </View>
            </View>
            <View style={styles.tableTitles}>
                {isLoading ? (
                    <View style={styles.loaderStyle}>
                        <ActivityIndicator size="large" color="#aaa" />
                    </View>
                ) : (
                    <FlatList
                        data={driverStandingsList}
                        keyExtractor={(i, index) => String(index)}
                        renderItem={({ driver }) => (
                            <StandingTable
                                rankNumber={driver?.driverName}
                                driverName={driver}
                                points={driver}
                            />
                            //console.log('driver: ', driver);
                        )}
                        ListFooterComponent={renderLoader}
                    />
                )}
            </View>
        </View>
    );
}

rsl1atfo

rsl1atfo1#

我通过将renderItem更改为以下内容来解决它:

renderItem={({ item }) => {
                    const driverPointsArray = Object.values(
                        item.driverPoints
                    );
                    const driverPositionArray = Object.values(
                        item.driverPosition
                    );

                    return (
                        <StandingTable
                            driverPosition={driverPositionArray[0]}
                            driverName={item.driverName}
                            driverPoints={driverPointsArray[0]}
                        />
                    );
                }}

字符串

相关问题