我如何使用帶有 props react js 的 API 調用來渲染組件

Question

我正在嘗試渲染一個組件，該組件使用我傳遞的道具調用 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;

Answer 1

您不應該在組件主體中產生副作用，您應該使用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函數，這里是一個帶有.then promise 鏈接的工作版本。

 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") );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="root" />

Answer 2

這是組件，只需在 App 中使用<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;

Answer 3

我認為您應該將該代碼分解為幾個部分。 此外，您不能在函數體中進行 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 組件。 這樣就可以在不渲染任何東西的情況下重用它。

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