map function 不顯示任何內容

Question

該代碼與單鏈表有關，我試圖在 React js 中使用 map function 和 state 顯示單鏈表的值。

function 邏輯（）是在單擊顯示按鈕時更新 state，鏈接列表中的所有值都存儲在一個數組中，它更新 state listdata 但問題是當單擊顯示按鈕時 map function 未被調用....

要解決上述問題，請提出一些想法，提示....

代碼是：-

import { useState } from "react"
import { Container } from "react-bootstrap"
import "./css/style.css"

const logic = (start) => {
    let temp = start.props
    let arr = []
    let k = 0
    while(temp.ptr!=null) {
        arr[k] = temp.n
        k++
        temp=temp.ptr
    }
    arr[k]=temp.n
    return arr
}

const SDisplay = (start,setdisp) => {
    const [ listdata,setlistdata ] = useState([])

    return (
        <>
            <Container>
                <input type="button" onClick={()=>{setlistdata([...logic(start)])}} value="Display"></input>
                {
                    listdata.map((i)=>{
                        <div className="d-flex align-items-center">
                            <div className="box">{i}</div>
                            <div className="arrow"></div>
                        </div>
                   })
                }
                <a href="#" onClick={()=>{setdisp.display(false)}} className="text-decoration-none text-dark">Back</a>
            </Container>
        </>
    )
}

export default SDisplay

Answer 1

您需要在使用map()時返回一些東西，如下所示：

listdata.map((i)=>{
  return (
      <div className="d-flex align-items-center">
       <div className="box">{i}</div>
       <div className="arrow"></div>
      </div>
    )
 })

或者你可以這樣做： // 如果你不想使用return關鍵字，只需在卷曲的{}內用圓括號()包裹組件。

 listdata.map((i)=>(
   <div className="d-flex align-items-center">
     <div className="box">{i}</div>
     <div className="arrow"></div>
   </div>
 ))