ES6 React JSX returns 一个对象而不是数组

Question

玩过 React 之后，我注意到输出数组时出现了一个奇怪的行为：

function bar1() {
  let arr = [0, 1];
  return arr.map((el) => foo(el))
}

function bar2() {
  let arr = [0, 1];
  arr = arr.map((el) => foo(el))
  return (
    {arr}
  )
}

function foo(key) {
  return (
    <div key={key}>Foo</div>
    )
}

我希望 bar1() 和 bar2() 输出相同的结果，但是 bar2() 抛出错误：

Objects are not valid as a React child (found: object with keys {arr}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons.

我需要在 map 操作后在 bar2() 中插入额外的元素，这就是我不能使用简化版本的原因。

它是与 JSX 相关的错误还是它的行为符合预期？

Answer 1

回答您的问题 - 这不是错误，而是预期的行为。

当你 return {arr} 时，你本质上是 return 一个 {arr: arr} 对象，因为 Babel 将它理解为一个 ES6 对象 shorthand（参见 property definition).为了从两个函数中获得相同的输出，您应该从 bar2() 函数的 return 语句中删除大括号。

ES6 React JSX returns 一个对象而不是数组

ES6 React JSX returns an object instead of array

javascript

jsx

ecmascript-6

reactjs