我正在创建一个具有类似 tinder 的 UI 的 React Native 应用程序。虽然它不应该显示用户，而应该显示视频游戏封面。我已经设置了 nodejs 服务器，我可以通过 postman 从中接收信息。 在 http://localhost:9000/coverInfo 向我的服务器发送 get 请求后， 我得到了这个 json 作为响应：

[
    {
        "id": 110592,
        "alpha_channel": false,
        "animated": false,
        "game": 96367,
        "height": 800,
        "image_id": "co2dc0",
        "url": "//images.igdb.com/igdb/image/upload/t_thumb/co2dc0.jpg",
        "width": 800,
        "checksum": "04a45b3f-4f90-f4a1-cc0d-1483f0cc2612"
    },
    {
        "id": 65483,
        "game": 100547,
        "height": 800,
        "image_id": "pkkd08qhfxt5cosp3hra",
        "url": "//images.igdb.com/igdb/image/upload/t_thumb/pkkd08qhfxt5cosp3hra.jpg",
        "width": 1260,
        "checksum": "e09f916b-04fe-8993-594e-b18435438a35"
    },
    {
        "id": 96891,
        "alpha_channel": false,
        "animated": false,
        "game": 132099,
        "height": 933,
        "image_id": "co22rf",
        "url": "//images.igdb.com/igdb/image/upload/t_thumb/co22rf.jpg",
        "width": 700,
        "checksum": "2452703f-4092-bb6f-d52c-51eb30a4ab94"
    },
....

从客户端，我试图检索这些数据并将其存储在数组中。这是我的代码在客户端的样子：

export default function App() {

   const [games, setGames] = useState([])
   const [currentIndex, setCurrentIndex] = useState(0)
   const swipesRef = useRef(null)
   
   async function fetchGames() {
      try {
         const {data} = await axios.get('http://localhost:9000/coverInfo')
         setGames(data.results)
         console.log(data.results)
     }   catch (error) {
         console.log
         Alert.alert('Error getting games', '', [{text: 'Retry', onPress: () => fetchGames()}])
   }
}


   useEffect(() => {
      fetchGames()
   }, [])

   function handleLike() {
      console.log('like')
      nextGame()
   }

   function handlePass() {
      console.log('pass')
      nextGame()
   }

   function nextGame() {
      const nextIndex = games.length - 2 == currentIndex ? 0 : currentIndex + 1
      setCurrentIndex(nextIndex)
   }

   function handleLikePress() {
      swipesRef.current.openLeft()
   }

   function handlePassPress(){
      swipesRef.current.openRight()
   }

   return (
     <View style={styles.container}>
        <TopBar />
         <View style = {styles.swipes}>
            {games.length > 1 &&
               games.map(
                  (u, i) =>
                  currentIndex == i && (
                  <Swipes 
                     key = {i} 
                     ref={swipesRef} 
                     currentIndex={currentIndex} 
                     games={games} 
                     handleLike={handleLike} 
                     handlePass={handlePass}
                  ></Swipes>
                  )
               )}
         </View>
         <BottomBar handlePassPress={handlePassPress} handleLikePress={handleLikePress}/>
     </View>
   );
 }

但是，运行时出现以下错误：

TypeError: Cannot read property 'length' of undefined
App
C:/Users/matth/Joystik/App.js:62
  59 | return (
  60 |   <View style={styles.container}>
  61 |      <TopBar />
> 62 |       <View style = {styles.swipes}>
     | ^  63 |          {games.length > 1 &&
  64 |             games.map(
  65 |                (u, i) =>
View compiled
▶ 17 stack frames were collapsed.
fetchGames$
C:/Users/matth/Joystik/App.js:23
  20 | async function fetchGames() {
  21 |    try {
  22 |       const {data} = await axios.get('http://localhost:9000/coverInfo')
> 23 |       setGames(data.results)
     | ^  24 |       console.log(data.results)
  25 |   }   catch (error) {
  26 |       console.log
View compiled
▶ 6 stack frames were collapsed.

我的服务器端的代码如下所示：

router.get("/", function(req, res, next) {

    axios({
        url: "https://api.igdb.com/v4/covers",
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Client-ID' : '----------------------------',
            'Authorization' : 'Bearer ------------------',
        },
        data: "fields alpha_channel,animated,checksum,game,height,image_id,url,width;"
      })
      .then(response => {
        //console.log(response.data);
        const testing = response.data;
        res.json(testing);
        })
    .catch(err => {
        console.error(err);
        });
    
    
});

我尝试将“data.results”更改为数据，但它不起作用。客户端没有从 node js 服务器获取任何内容。

还可以注意到，我能够成功地从另一个客户端项目接收信息，如下所示：

class App extends React.Component{

  
  constructor(props){
    super(props);
    this.state = {apiResponse: ""};
  }

  callAPI() {
    fetch("http://localhost:9000/coverInfo")
    .then(res => res.text())
    //.then(res => console.log(res.json))
    .then(res => this.setState({apiResponse: res}));
  }
  componentWillMount(){
    this.callAPI();
  }

render(){
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
      </header>
      <p>
        {this.state.apiResponse}
      </p>
    </div>
  );
}
}
export default App;

这在网页底部返回了以下文本：

[{"id":110592,"alpha_channel":false,"animated":false,"game":96367,"height":800,"image_id":"co2dc0","url":"//images.igdb.com/igdb/image/upload/t_thumb/co2dc0.jpg","width":800,"checksum":"04a45b3f-4f90-f4a1-cc0d-1483f0cc2612"},{"id":65483,"game":100547,"height":800,"image_id":"pkkd08qhfxt5cosp3hra","url":"//images.igdb.com/igdb/image/upload/t_thumb/pkkd08qhfxt5cosp3hra.jpg","width":1260,"checksum":"e09f916b-04fe-8993-594e-b18435438a35"},{"id":96891,"alpha_channel":false,"animated":false,"game":132099,"height":933,"image_id":"co22rf","url":"//images.igdb.com/igdb/image/upload/t_thumb/co22rf.jpg","width":700,"checksum":"2452703f-4092-bb6f-d52c-51eb30a4ab94"},{"id":9331,"game":8938,"height":750,"image_id":"ikjcylxero1pb1sl9clj","url":"//images.igdb.com/igdb/image/upload/t_thumb/ikjcylxero1pb1sl9clj.jpg","width":640,"checksum":"0519ea95-feda-c674-1e6a-88a388ba5899"},{"id":900,"game":194,"height":362,"image_id":"fl0bjezupibkettkmsyg","url":"//images.igdb.com/igdb/image/upload/t_thumb/fl0bjezupibkettkmsyg.jpg","width":300,"checksum":"ffbf4f5b-99b9-eab3-1eb6-ea7f4f9c2df1"},{"id":28001,"game":46426,"height":2156,"image_id":"arzwj3bju1aoakgufnku","url":"//images.igdb.com/igdb/image/upload/t_thumb/arzwj3bju1aoakgufnku.jpg","width":1539,"checksum":"fb9fae9b-d717-d1d1-a3ee-ef6191af168d"},{"id":6424,"game":2410,"height":150,"image_id":"y7otr2cfclfpfuhtzhzq","url":"//images.igdb.com/igdb/image/upload/t_thumb/y7otr2cfclfpfuhtzhzq.jpg","width":342,"checksum":"d41815d5-85a7-ac17-c067-ac88563578e9"},{"id":15242,"game":18896,"height":360,"image_id":"dq7tvq2dub1xj0jnqafe","url":"//images.igdb.com/igdb/image/upload/t_thumb/dq7tvq2dub1xj0jnqafe.jpg","width":480,"checksum":"35bd8f63-6766-5426-d7c2-aaa34e8d8a19"},{"id":6432,"game":6264,"height":341,"image_id":"rii076tdl6uy1tnhohsg","url":"//images.igdb.com/igdb/image/upload/t_thumb/rii076tdl6uy1tnhohsg.jpg","width":500,"checksum":"f48c9e58-b52f-382b-9d92-4031e5a5a15c"},{"id":27255,"game":48063,"height":2100,"image_id":"unmgn234f5uesld8nfcn","url":"//images.igdb.com/igdb/image/upload/t_thumb/unmgn234f5uesld8nfcn.jpg","width":1528,"checksum":"fec3c3a3-6edd-5a35-5440-f1a19455a9