array.map() 在 React JS 中一起返回元素

Question

const test = () = {

const array = ['hello', 'myNameIs']

return (

{
array.map((arr) => (
  <div>{arr}</div>
  <button>Edit</button>
  )
}

)

}

This.map() 方法沒有按我的預期工作。

使用代碼，我試圖得到

hello [button]
myNameIs [button]

像這樣。

但是當我實際渲染代碼時，我得到了

hello MynameIs [button]

在這種情況下，如何更改 .map() 語句？

我應該使用索引嗎？

Answer 1

看看下面的例子，我幾乎是用你的代碼創建的，它按照你的預期工作，沒有問題。

 function App() { const array = ['hello', 'myNameIs']; return array.map(item => ( <div key={item}> {item} <button>Edit</button> </div> )); } ReactDOM.render(<App />, document.getElementById("root"));

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

Answer 2

在div標簽內創建按鈕

array.map((arr) => (
  <div>{arr} <button>Edit</button></div>
 )

Answer 3

const test = () = {
  const array = ['hello', 'myNameIs']
  return (

  {array.map((item,key) => (
    <div key={item}>{item}</div><button>Edit</button>
  )})
}

Answer 4

您沒有使用正確的箭頭 function 語法它應該像const test = ()=>{} React 組件 JSX 應該返回一個父容器嘗試將其包裝為：

 const Test = () => { const array = ["hello", "myNameIs"]; return ( <> {array.map((arr) => { return ( <> <div>{arr}</div> <button>Edit</button> </> ); })} </> ) }

這是工作代碼沙箱鏈接https://codesandbox.io/s/kind-easley-jxiei?file=/src/App.js:57-336

我希望它有幫助。