回到部落格

2024-01-09

【React 新手村】如何簡單快速渲染一串資料在頁面上？

【React 新手村】如何簡單快速渲染一串資料在頁面上？

原文發表於 Medium。

List Rendering

這勉強算是個前端術語，每當我們從API fetch資料回來時，有非常高的機率會有很多筆資料。通常多筆資料都會被裝載在Array裏面，我們就需要一筆筆地拿出來把它渲染在頁面上。

下面先用一個 NG的版本給各位看看：

function App() {

    //假設這筆資料是從網路API fetch來的  
  const DUMMY_DATA = ["John", "Billy", "Mary"]  
  
  return (  
    <div>  
        <p>{DUMMY_DATA[0]}</p>  
        <p>{DUMMY_DATA[1]}</p>  
        <p>{DUMMY_DATA[2]}</p>  
    </div>  
  );  
}  
  
export default App;

這個程式碼有個致命的問題，由於API的資料長度可能有變化，若變長了，則上面的程式碼就無法把所有項目都呈現出來；更慘的是，若資料長度變短了，例如只剩兩筆，那麼上述的程式碼就會跳出錯誤，因為他找不到DUMMY_DATA[2]。

要怎麼樣讓React自動且靈活地渲染出Array中的資料？我們要依靠Javascript的原生功能[Map()](<https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/map>) 。

透過Map功能渲染組件

有關Map，網路上說明為：

Array.map() 是一個用於創建新陣列，並在每個元素上調用提供的函數的方法。它通常用於對陣列中的每個元素進行轉換，並返回一個新的陣列，而不修改原始陣列。

Array.map() 是一個用於創建新陣列，並在每個元素上調用提供的函數的方法。它通常用於對陣列中的每個元素進行轉換，並返回一個新的陣列，而不修改原始陣列。

講白一點，就是他會逐一將Array中的資料做些事情，這樣我們就不需要暴力「窮舉」到底，資料多長它就做多少事。

//說明來自 https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/map

const array1 = [1, 4, 9, 16];  
  
// Pass a function to map  
const map1 = array1.map((x) => x * 2);  
  
console.log(map1);  
// Expected output: Array [2, 8, 18, 32]

那麼具體來講，他要怎麼作用在React上呢？

function App() {

    //假設這筆資料是從網路API fetch來的  
  const DUMMY_DATA = ["John", "Billy", "Mary"]  
  
  return (  
    <div>  
  
      {  
        DUMMY_DATA.map((item)=>{  
          return(  
             <p>{item}</p>  
            )  
      } )  
      }  
  
    </div>  
  );  
}  
  
export default App;

在上述程式碼中，我們使用花括號在JSX return的內容中劃出一塊可以使用陳述句的區域，然後使用DUMMY_DATA.map()將每個array中的item逐一拿出，鑲嵌在一段React node中再返回。如此一來就可以將所有的資料都列出了。

若想要搭配Wrapper這樣的架構技巧讓資料列表呈現更漂亮，或添加制式資訊的話：

import Wrapper from "./components/Wrapper"

function App() {  
    //假設這筆資料是從網路API fetch來的  
  const DUMMY_DATA = ["John", "Billy", "Mary"]  
  return (  
    <div>  
      {  
        DUMMY_DATA.map((item)=>{  
          return(  
             <Wrapper>{item}</Wrapper>  
            )  
      } )  
      }  
    </div>  
  );  
}  
  
export default App;  
  
  
//./components/Wrapper  
  
function Wrapper({ children }) {  
  
  return (  
    <div>  
        <h1>{children}</h1>  
        <p>Teacher</p>  
    </div>  
  );  
}  
  
export default Wrapper;

提供上面的內容供參考，有關Wrapper的相關討論，請參閱另一篇文章：【React開發中】進階版Modal-Wrapper。

使用map()來渲染頁面是React.js的秘技，簡單易懂，閱讀性高。

雖然其他框架的使用者可能不是很欣賞這個手法，像我就看過有使用Vue的前端大神在LinkIn上怒斥這樣的手法根本不是前端會做的，但我卻覺得非常喜歡。說到這個，有空來寫個Vue.js的List Rendering手法吧！（可能會輪到React大神吐槽了）但別誤會，我沒有要挑起爭端，但老一輩有句話是：「互相漏氣求進步」，我覺得用來形容彼此擁護者之間的拌嘴真是非常傳神。

祝大家天天有coding，天天有成長。我是一個半路出家卻把coding當作興趣，且不斷鑽研技巧的開發者，希望有朝一日能成為全然獨當一面的技術大神。