在反應中顯示來自 api 的數據

Question

我正在嘗試使用以下 API 顯示每個團隊的名稱： https://www.balldontlie.io/api/v1/teams 。 我的主 app.js 文件中有以下代碼：

const result = await Axios('https://www.balldontlie.io/api/v1/teams')
console.log(result.data)
console.log(result.data.data[0])

這成功地獲取了數據，並且第一行控制台能夠顯示控制台中的所有數據，而第二行顯示數據中有關第一個團隊的所有信息。 在每個團隊數據信息中，它們具有一個屬性，稱為“名稱”並表示團隊名稱。 我想知道我將如何稱呼它。 當我在另一個文件中有以下代碼時，它不會在屏幕上顯示任何內容：

{Object.keys(items).map(item => (
            <h1 key={item}>{item.data}</h1>
        ))}

我應該如何更改 item.data 才能正確顯示所有團隊的名稱？ 如果需要，我可以提供更多代碼，但我認為這段代碼可能會這樣做。

Answer 1

不要使用 axios，現在 JS 有一個更好的選擇，叫做 fetch。 包裝異步 function 上的調用。 最后析構數據 object。 並避免在你的 node_modules 上安裝更多東西。

這是什么？

1. 使用 callApi function 請求端點

2. 完成 promise 后，僅從所有 json scope 收集數據。

3. 循環遍歷每個名稱

const myComponent = () => {
    const names = [];
    const callApi = async () => {
        await fetch('https://www.balldontlie.io/api/v1/teams')
        .then(r => r.json())
        .then(resp => { const { data } = resp; return data; })
        .catch(e => { console.log(e.message); });
    };
    callApi();

    return <>
        {names && names.length > 0
        ? <span>{names.map(({ id, name }) => <h1 key={id}>{name}</h1>)}</span>
        : <span>No rows </span>}
    </>;

Answer 2

您的響應是一個數組

// you need to change this 
Object.keys(items).map(item => (
        <h1 key={item}>{item.data}</h1>
))}
// to this where items = result.data.data
items.map(item => <h1 key={item.id}>{item.city} </h1> 
// to note here item.city need to be a string or number and not an objet
//if your data does not have an Id
items.map((item, index) => <h1 key={index}>{item.city} </h1> 

在你的代碼中，這將變成這樣

return (
   <div>
     {items.map((item, index) => <h1 key={index}>{item.city} </h1>}
   </div>
)

這是一個完整代碼的示例，因為您在控制台中看到響應和數據，但在 UI 中看不到，這可能是 state 問題。

const App = () => {
  const [items, setItems] = useState([]);
  useEffect(()=>{
    fetch('https://www.balldontlie.io/api/v1/teams')
    .then(res => res.json())
    .then(res => {
        setItems(res.data);
    })
    .catch(error => { 
    //handle error here
    });
},[])
  return (
    <>
      {items.map(el => <h1 key={el.id}> el.city </h1>}
    </>
  )
}

Answer 3

根據您的第二個代碼塊，您正在嘗試訪問字符串的“數據”屬性，因為您正在映射項目的鍵數組。

有效：

const item_keys = Object.keys(items);
//if the items is an array, item_keys = ["0","1",...]
//if items is an object, item_keys = ["id","name",...]
const result = item_keys.map(item => (
    <h1 key={item}>{item.data}</h1>
));
//either way, result is an array of <h1>undefined</h1>
//because item is a string

假設您將項目定義為const items = result.data.data （已編輯），您應該能夠顯示如下名稱：

{items.map((item, index) => (
    <h1 key={index}>{item.name}</h1>
))}

Answer 4

const result = await Axios('https://www.balldontlie.io/api/v1/teams')
const data = result.data;

//if you want to display all names
{
    data.map(team => (
        <div>
            <h1 key={`${team.id}`}>{team.name}</h1>
        </div>
    )
}

//if you want to display all fields in each team
{
    data.map(team => (
        <div key={`${team.id}`}>
            {
                Object.keys(team).map((key, keyIndex) => (
                    <h1 key={`k-${team.id}-${keyIndex}`}>{team[`${key}`]}</h1>
                ))
            }
        </div>
    )
}

Answer 5

由於您的數據響應是一個對象數組，並且您的要求是顯示該數據的屬性，因此您只需對數據運行一個簡單的循環並呈現項目。 “數據”下方是來自 API 的響應

const data = [{"id":"1",name:"Team1"}, {"id":"2",name:"Team2"}]
   
data.map(item => 
   <div>
       <h1 key={id}>{item.name}</h1>
   </div>
);