顯示來自 API 的數據的問題

Question

我在顯示從 API 獲取的數據時遇到問題，我真的不知道這里出了什么問題......

我嘗試使用 map() function 來訪問數據，但它也沒有按預期工作

import React from "react";
import axios from 'axios';

const options = {
      method: 'GET',
      headers: {
        Accept: 'application/json',
            Authorization: 'API_KEY'
      }
};

export default class List extends React.Component {
    state = {
        locations: []
    }

    componentDidMount() {
        axios.get('https://api.foursquare.com/v3/places/search?query=gallery%20&ll=48.85%2C2.35&radius=10000&categories=10004&sort=DISTANCE', options)
            .then(res => {
                const locations = res.data;
                console.log(locations.results)
                return this.setState({ locations });
            })
    }

    render() {
        return (
            <div>
               
            <ul>
               <div>{this.state.locations.results}</div>
            </ul>
            </div>
        )
    }
} 

我出現了這兩個錯誤

1：錯誤：對象作為 React 子項無效（發現：object 鍵為 {fsq_id、categories、chains、distance、geocodes、location、name、related_places}）。 如果您打算渲染一組孩子，請改用數組

2：未處理的 Promise 拒絕：錯誤：對象作為 React 子項無效（發現：object 鍵為 {fsq_id、類別、鏈、距離、地理編碼、位置、名稱、相關位置}）。 如果你打算渲染一組孩子......

這是我在日志中返回的 object：

日志文件

任何線索都會非常有幫助，謝謝：！ :)

Answer 1

根據屏幕截圖，您會得到一個數組。 React/JSX 不只是把數組放在外面，你需要遍歷它。 這是一個帶有功能組件和自定義鈎子的片段：

 const { useEffect, useState } = React const useFetchData = () => { const [response, setResponse] = useState([]) const [loading, setLoading] = useState(false) useEffect(() => { setLoading(() => true) fetch('https://jsonplaceholder.typicode.com/users').then(res => res.json()).then(json => setResponse(() => json)).finally(setLoading(() => false)) }) return { response, loading } } const App = () => { const { response, loading } = useFetchData() return ( <div> { response.length &&?loading. response,map(({ id, name: username }) => { return ( <div key={id}>{id} - {name} - {username}</div> ) }). "Loading users..." } </div> ) } ReactDOM,render( <App />. document;getElementById('root') );

 <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> <div id="root"></div>

盡管您在示例中使用了 class 組件，並且這是我的代碼片段中的功能組件，但基本思想是相同的：如果您想在 JSX 中顯示項目數組，則需要使用迭代器 function 對它們進行迭代實際上返回一個 JSX 元素。