Node.js 尝试从终结点呈现数据时为空页

我使用React Native构建了一个应用程序，并使用MySQL workbench和express和nodeJS从头创建了一个端点。
在我尝试从该端点获取所有数据以便将其显示到Dom中之前，一切都很好。不幸的是，输出是空的，即使在开发人员的工具中，我可以看到来自该端点的所有返回对象。
我不知道我的代码出了什么问题。下面你可以看到我到目前为止所做的事情

Items.js:

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

const Items = () => {
  const [isLoading, setLoading] = useState(true);
  const [products, setProducts] = useState([]);

  useEffect(() => {
    axios
      .get(`http://localhost:3000/products/`)
      .then((res) => {
        console.log(res);
        setProducts[res.data];
        setLoading(false);
      })
      .catch((err) => {
        console.error(err);
      });
  }, []);
  return (
    <View style={styles.container}>
      {isLoading ? (
        <ActivityIndicator />
      ) : (
        <FlatList
          products={products}
          keyExtractor={({ id }, index) => id}
          renderItem={({ item }) => (
            <Text>
              {item.id}, {item.name}, {item.price}, {item.category},{" "}
              {item.gender}, {item.brand}
            </Text>
          )}
        />
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
  },
});

export default Items;

import React，{useffect，useState}来自“React”；
进口{
活动指示器，
平面列表，
文本，
看法
样式表，
}从“反应本族语”；
从“axios”导入axios；
常量项=（）=>{
const[isLoading，setLoading]=useState（true）；
const[products，setProducts]=useState（[]）；
useffect（（）=>{
axios
.得到(`http://localhost:3000/products/`)
。然后（（res）=>{
控制台日志（res）；
setProducts[res.data]；
设置加载（假）；
})
.catch（（错误）=>{
控制台错误（err）；
});
}, []);
返回(
{孤岛加载(
使用
setProducts（res.data.response）
而不是
setProducts[res.data]
，并且
使用
setProducts（res.data.response）
而不是
setProducts[res.data]
，并尝试以下操作：

    import React, { useEffect, useState } from "react";
    import {
      ActivityIndicator,
      FlatList,
      Text,
      View,
      StyleSheet
    } from "react-native";
    
    const Items = () => {
      const [isLoading, setLoading] = useState(true);
      const [products, setProducts] = useState([]);
    
      useEffect(() => {
        axios
            .get(`http://localhost:3000/products/`)
            .then((res) => {
                console.log(res);
                setProducts(res.data.response);
                setLoading(false);
             })
             .catch((err) => {
                 console.error(err);
             });
       }, []);
    
      return (
        <View style={styles.container}>
          {isLoading ? (
            <ActivityIndicator />
          ) : (
            <FlatList
              data={products}
              keyExtractor={({ id }, index) => id}
              renderItem={({ item }) => (
                <Text>
                  {item.id}, {item.name}, {item.price}, {item.category},{" "}
                  {item.gender}, {item.brand}
                </Text>
              )}
            />
          )}
        </View>
      );
    };
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        padding: 24
      }
    });
    
    export default Items;

import React，{useffect，useState}来自“React”；
进口{
活动指示器，
平面列表，
文本，
看法
样式表
}从“反应本族语”；
常量项=（）=>{
const[isLoading，setLoading]=useState（true）；
const[products，setProducts]=useState（[]）；
useffect（（）=>{
axios
.得到(`http://localhost:3000/products/`)
。然后（（res）=>{
控制台日志（res）；
setProducts（res.data.response）；
设置加载（假）；
})
.catch（（错误）=>{
控制台错误（err）；
});
}, []);
返回(
{孤岛加载(
) : (
id}
renderItem={（{item}）=>(
{item.id}、{item.name}、{item.price}、{item.category}、{“}
{item.gender}，{item.brand}
)}
/>
)}
);
};
const styles=StyleSheet.create({
容器：{
弹性：1，
填充：24
}
});
导出默认项；
试试这个：

    import React, { useEffect, useState } from "react";
    import {
      ActivityIndicator,
      FlatList,
      Text,
      View,
      StyleSheet
    } from "react-native";
    
    const Items = () => {
      const [isLoading, setLoading] = useState(true);
      const [products, setProducts] = useState([]);
    
      useEffect(() => {
        axios
            .get(`http://localhost:3000/products/`)
            .then((res) => {
                console.log(res);
                setProducts(res.data.response);
                setLoading(false);
             })
             .catch((err) => {
                 console.error(err);
             });
       }, []);
    
      return (
        <View style={styles.container}>
          {isLoading ? (
            <ActivityIndicator />
          ) : (
            <FlatList
              data={products}
              keyExtractor={({ id }, index) => id}
              renderItem={({ item }) => (
                <Text>
                  {item.id}, {item.name}, {item.price}, {item.category},{" "}
                  {item.gender}, {item.brand}
                </Text>
              )}
            />
          )}
        </View>
      );
    };
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        padding: 24
      }
    });
    
    export default Items;

import React，{useffect，useState}来自“React”；
进口{
活动指示器，
平面列表，
文本，
看法
样式表
}从“反应本族语”；
常量项=（）=>{
const[isLoading，setLoading]=useState（true）；
const[products，setProducts]=useState（[]）；
useffect（（）=>{
axios
.得到(`http://localhost:3000/products/`)
。然后（（res）=>{
控制台日志（res）；
setProducts（res.data.response）；
设置加载（假）；
})
.catch（（错误）=>{
控制台错误（err）；
});
}, []);
返回(
{孤岛加载(
) : (
id}
renderItem={（{item}）=>(
{item.id}、{item.name}、{item.price}、{item.category}、{“}
{item.gender}，{item.brand}
)}
/>
)}
);
};
const styles=StyleSheet.create({
容器：{
弹性：1，
填充：24
}
});
导出默认项；
能否添加
console.log（res）的打印
关于你的问题？你好，阿克兰·阿德尔，我这样做了，因为你可以看到代码，我正在开发工具中获取所有数据。你能发布你的
res.data
的结构吗？我看到下面的答案是正确的，但你仍然有另一个错误，只要发布它，我们将帮助你发现。你好，Khanh Le Tran，我已经用sc更新了我的问题重新拍摄我在控制台中获得的数据。只要看一看，告诉我是否需要提供更多信息。谢谢您添加
console.log（res）的打印
关于你的问题？你好，阿克兰·阿德尔，我这样做了，因为你可以看到代码，我正在开发工具中获取所有数据。你能发布你的
res.data
的结构吗？我看到下面的答案是正确的，但你仍然有另一个错误，只要发布它，我们将帮助你发现。你好，Khanh Le Tran，我已经用sc更新了我的问题重新拍摄我在控制台中获得的数据。只需看一看，然后告诉我是否需要提供更多信息。感谢Saghi Saghar Mirali，感谢您的反馈。当我更改setProducts（res.data）而不是setProducts[res.data]时我收到一个错误消息：bundle.js:6930未捕获的不变量冲突：尝试在VirtualizedList的不变量（）处获取超出范围的索引NaN的帧。\u this.\u getFrameMetrics（.And changing from what type is your res.data？是数组还是对象？或者…？能否添加console.log（res）您的问题的结果？我已经编辑了我的问题，它是我在控制台中得到的一个对象。它是一个包含15个对象的数组。您应该写入setProducts（res.data.response），因为您的项目在res.data.response而不是res.data中。即使我从setProducts（res.data.）更改为setProducts（res.data.response），也没有任何更改您好，Saghar Mirali，感谢您的反馈。当我更改setProducts（res.data）而不是setProducts[res.data]时，我收到一个错误消息：bundle.js:6930未捕获的不变量冲突：尝试在VirtualizedList的不变量（）处获取超出范围索引NaN的帧。\u这是。\u getFrameMetrics（.和从什么类型改变你的res.data？是数组还是对象还是…？你能把你的console.log（res）结果添加到你的q中吗