首頁猿問我如何使用 props React...

我如何使用 props React js 通過 API 調用來渲染組件

JavaScript

達令說 2023-07-06 14:40:28

我正在嘗試渲染一個使用我傳遞的 prop 調用 api 的組件，但出現此錯誤：錯誤：對象作為 React 子項無效（找到：[object Promise]）。如果您打算渲染子集合，請改用數組。還有其他人說它無法讀取 null 的屬性映射，這是我的代碼import React, { useEffect } from "react";const GetLeagues = async (country) => { const url = `https://www.thesportsdb.com/api/v1/json/1/search_all_leagues.php?c=${country}&s=Soccer`; const res = await fetch(url); const { countrys } = await res.json(); return ( <div> <ul> {countrys.map((country, i) => { return <li key={i}>{country.strLeague}</li>; })} </ul> </div> );};const Leagues = () => { useEffect(() => { GetLeagues(); }, []); return ( <div> <GetLeagues country={"Spain"} /> </div> );};export default Leagues;

查看完整描述

3 回答

慕娘9325324

TA貢獻1783條經驗獲得超4個贊

您不應該在組件主體中產生副作用，您應該使用useEffect副作用來產生副作用，因此您不應該創建組件async，而是可以將函數定義為異步，使用它們useEffect然后設置狀態。

function Leagues({ country }) {

const [countryData, setCountryData] = React.useState([]);

React.useEffect(() => {

async function getCountries() {

const url = `https://www.thesportsdb.com/api/v1/json/1/search_all_leagues.php?c=${country}&s=Soccer`;

const res = await fetch(url);

const { countrys } = await res.json();

setCountryData(countrys);

}

getCountries();

}, [country]);

return (

<div>

<ul>

{countryData.map((country, i) => {

return <li key={i}>{country.strLeague}</li>;

})}

</ul>

</div>

);

}

ReactDOM.render(

<Leagues country="Spain" />,

document.getelementById("root")

);

由于async代碼片段中不支持函數，因此這里是帶有.thenPromise 鏈的工作版本。

function Leagues({ country }) {

const [countryData, setCountryData] = React.useState([]);

React.useEffect(() => {

const url = `https://www.thesportsdb.com/api/v1/json/1/search_all_leagues.php?c=${country}&s=Soccer`;

fetch(url)

.then((res) => res.json())

.then(({ countrys }) => setCountryData(countrys));

}, [country]);

return (

<div>

<ul>

{countryData.map((country, i) => {

return <li key={i}>{country.strLeague}</li>;

})}

</ul>

</div>

);

}

ReactDOM.render(

<Leagues country="Spain" />,

document.getElementById("root")

);

反對回復 2023-07-06

人到中年有點甜

TA貢獻1895條經驗獲得超7個贊

這是組件，只需在應用程序中調用它，<Leagues c='Spain'/> 我調用參數c，因為country顯然在countrys任何地方都不可讀。

import React, { useEffect, useState } from "react";

const Leagues = ({c}) => {

const [countrys, countrysSet] = useState(false);

useEffect(() => {

countrysSet(false);

const url = `https://www.thesportsdb.com/api/v1/json/1/search_all_leagues.php?c=${c}&s=Soccer`;

fetch(url).then( res => res.json()).then(countrysSet);

}, [c]);

if( countrys === false ) {

return <p>loading...</p>;

}

return (

<div>

<ul>

{countrys.map((country, i) => {

return <li key={i}>{country.strLeague}</li>;

})}

</ul>

</div>

);

};

export default Leagues;

反對回復 2023-07-06

ABOUTYOU

TA貢獻1812條經驗獲得超5個贊

我認為你應該將該代碼分解為幾個部分。另外，您不能在函數體內進行 api 調用，否則每次重新渲染組件時它都會運行。讓我用你的例子向你展示：

import React, { useEffect, useState } from "react";

const GetLeagues = async (country) => {

// This helper function fetches your leagues

const url = 'your url'

const res = await fetch(url);

const { countries } = await res.json();

return countries;

};

const Leagues = () => {

const [leagues, setLeagues] = useState([]);

useEffect(() => {

async function init() {

// Declaring an extra function as useEffect

// cannot be async.

const countries = await GetLeagues();

setLeagues(countries);

}

init();

}, []);

return (

<div>

{leagues.map((country, i) => {

return <li key={i}>{country.strLeague}</li>;

})}

</div>

);

};

export default Leagues;

請注意，現在“GetLeagues”只是一個實用函數，而不是 React 組件。這樣就可以重復使用而不渲染任何東西。

此外，您的“Leagues”組件會處理渲染自身所需的所有操作。

反對回復 2023-07-06

3 回答
0 關注
216 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

我如何使用 props React js 通過 API 調用來渲染組件

我如何使用 props React js 通過 API 調用來渲染組件

3 回答

添加回答