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

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

使用reactjs渲染JSON數(shù)據(jù)(來(lái)自reddit API)

使用reactjs渲染JSON數(shù)據(jù)(來(lái)自reddit API)

寶慕林4294392 2023-07-06 18:15:18
React 非常新,所以我可能會(huì)以錯(cuò)誤的方式處理這個(gè)問(wèn)題...我希望我的應(yīng)用程序從文本輸入字段獲取輸入,從 reddit API 檢索 JSON(url 是根據(jù)文本輸入構(gòu)建的),然后渲染來(lái)自 JSON 的數(shù)據(jù),循環(huán)遍歷每個(gè)條目。我正在使用 useState 來(lái)觸發(fā)數(shù)據(jù)渲染。我可以成功檢索數(shù)據(jù)并輸出特定值,但我希望能夠有一個(gè)循環(huán)將數(shù)據(jù)動(dòng)態(tài)輸出到各種 HTML 元素中。到目前為止,這是我所擁有的,可以讓我輸出一些特定值作為示例:import React, { useState } from 'react';const App = () => {  const [retrievedData, setRetrievedData] = useState([])    const runSearch = async() => {    const searchInput = document.getElementById('searchInput').value    const searchUrl = 'https://www.reddit.com/r/' + searchInput + '/new/.json?limit=5'    const response = await fetch(searchUrl)    const redditResponse = await response.json()    setRetrievedData(<>    <>{JSON.stringify(redditResponse.data.children[0].data.author)}</p>    <p>{JSON.stringify(redditResponse.data.children[0].data.title)}</p>    </>)  }  return (    <>      <section>        <input type="text" id='searchInput' placeholder='Enter a subreddit...'></input>        <button onClick={runSearch}>          Get Data        </button>        <div>{retrievedData}</div>      </section>    </>  );};export default App;下面是從 reddit API 檢索的 JSON 示例,僅使用我在上面的代碼中使用的示例值進(jìn)行了精簡(jiǎn):{  "kind": "Listing",  "data": {    "modhash": "",    "dist": 5,    "children": [      {        "kind": "t3",        "data": {          "author": "author1",          "title": "title1"        }      },      {        "kind": "t3",        "data": {          "author": "author2",          "title": "title2"        }      },      {        "kind": "t3",        "data": {          "author": "author3",          "title": "title3"        }      },      {        "kind": "t3",        "data": {          "author": "author4",          "title": "title4"        }      },      {        "kind": "t3",        "data": {          "author": "author5",          "title": "title5"        }      }    ],    "after": "t3_jnu0ik",    "before": null  }}我見(jiàn)過(guò)各種不同的渲染 JSON 數(shù)據(jù)的方法,其中許多顯示循環(huán)和/或 .map() 方法,但我似乎無(wú)法讓這些方法工作,并想知道這是否是一個(gè)問(wèn)題使用狀態(tài)。也許我應(yīng)該以其他方式呈現(xiàn)數(shù)據(jù)?
查看完整描述

1 回答

?
呼喚遠(yuǎn)方

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

您不需要設(shè)置jsx狀態(tài),您可以直接迭代子數(shù)據(jù)map


嘗試這個(gè)


const App = () => {

  const [retrievedData, setRetrievedData] = useState([])

  

  const runSearch = async() => {

    const searchInput = document.getElementById('searchInput').value

    const searchUrl = 'https://www.reddit.com/r/' + searchInput + '/new/.json?limit=5'

    const response = await fetch(searchUrl)

    const redditResponse = await response.json()

    if (redditResponse.data.children && redditResponse.data.children.length) {

      setRetrievedData(redditResponse.data.children)

    }

  }


  return (

    <>

      <section>

        <input type="text" id='searchInput' placeholder='Enter a subreddit...'></input>

        <button onClick={runSearch}>

          Get Data

        </button>

        <div>

          {

            retrievedData.map((children, index) => {

              return (

                <div key={children.data.author + index}>

                  <div>Kind: { children.kind }</div>

                  <div>Author: { children.data.author }</div>

                  <div>Title: { children.data.title }</div>

                </div>

              )

            })

          }

        </div>

      </section>

    </>

  );

};


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

添加回答

舉報(bào)

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號(hào)

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