Question

在玩完反应后，我注意到输出数组时出现了一个奇怪的行为：

＆＃13;

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>
    )
}

＆＃13;

我希望bar1（）和bar2（）输出相同的结果，但bar2（）会抛出错误：

对象无效作为React子对象（找到：具有键{arr}的对象）。如果您要渲染子集合，请使用数组，或者使用React附加组件中的createFragment（object）包装对象。

我需要在地图操作后在bar2（）中插入其他元素，这就是为什么我不能使用简化版本。

它是与JSX相关的错误还是按预期运行？

Answer 1

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

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

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

1 个答案: