第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

無(wú)法通過(guò)數(shù)組映射對(duì)象數(shù)組

無(wú)法通過(guò)數(shù)組映射對(duì)象數(shù)組

MMMHUHU 2023-07-06 11:07:17
我正在嘗試從 api 獲取數(shù)據(jù)并將其推送到數(shù)組中,然后映射它并將其呈現(xiàn)在頁(yè)面上,但是當(dāng)我嘗試通過(guò)數(shù)組映射時(shí)我什么也沒(méi)有得到。這是我的代碼:    let dataUrlNoPage = `https://api.themoviedb.org/3/movie/top_rated?api_key=${process.env.REACT_APP_TMDB_KEY}&language=en-US&page=`;    let top100Array = [];    const fetchData = () => {for (let i = 1; i <= 5; i++) {  fetch(dataUrlNoPage + i)    .then((res) => res.json())    .then((data) => {      console.log(data);      if (!data.errors) {        for (let i = 0; i < data.results.length; i++) {          top100Array.push(data.results[i]);        }        return top100Array;      } else {        setResults([]);        console.log('error');      }    });}}; fetchData();console.log(top100Array);我可以在控制臺(tái)中看到 top100Array 。const listItems = top100Array.map((movie) => (<li key={movie.id}>  <TopListCard movie={movie} /></li>)); return (<div className="container">  <div className="row">    <div className="col s12 m6">      <div className="add-content">        <h1>Top 20</h1>        <ul className="results">{listItems}</ul>        {console.log(listItems)}      </div>    </div>  </div></div>);};但我在這里得到空白頁(yè)面。謝謝您的幫助。
查看完整描述

3 回答

?
MYYA

TA貢獻(xiàn)1868條經(jīng)驗(yàn) 獲得超4個(gè)贊

您應(yīng)該使用使用異步結(jié)果設(shè)置的狀態(tài),而不是改變top100Array(然后由于.then某種原因從)返回它,從而強(qiáng)制重新渲染。用于等待每次提取完成。Promise.all


const [results, setResults] = useState();

const getData = i => fetch(dataUrlNoPage + i)

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

  .then((data) => {

    if (data.errors) {

      console.log(data.errors);

      throw new Error(data.errors);

    }

    return data.results;

// Retrieve results only once, on mount:

useEffect(() => {

  Promise.all(

    Array.from({ length: 5 }, (_, i) => getData(i + 1))

  )

    .then((allResults) => {

      setResults(allResults.flat());

    })

    .catch(handleErrors);

}, []);

然后渲染它:


<ul className="results">{results ? listItems(results) : null}</ul>

將 替換JSON.stringify為您想要將結(jié)果數(shù)組轉(zhuǎn)換為 JSX 元素的值。(也許你想要results.map(result => <span>result.title</span>),或者類(lèi)似的東西)


查看完整回答
反對(duì) 回復(fù) 2023-07-06
?
蝴蝶刀刀

TA貢獻(xiàn)1801條經(jīng)驗(yàn) 獲得超8個(gè)贊

不確定返回什么并且 for 循環(huán)不是最優(yōu)的,但你不妨直接在 jsx 中映射


<ul className='results'>

  {top100Array.map((movie) => (

    <li key={movie.id}>

      <TopListCard movie={movie} />

    </li>

  ))}

</ul>


查看完整回答
反對(duì) 回復(fù) 2023-07-06
?
慕神8447489

TA貢獻(xiàn)1780條經(jīng)驗(yàn) 獲得超1個(gè)贊

在我看來(lái)一切都很好。其實(shí)你并不需要回來(lái)top100Array。我唯一能想到的是你在top100Array填充項(xiàng)目之前渲染你的列表。



查看完整回答
反對(duì) 回復(fù) 2023-07-06
  • 3 回答
  • 0 關(guān)注
  • 148 瀏覽
慕課專(zhuān)欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢(xún)優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)