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

Question

const test = () = {

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

return (

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

)

}

此 .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>