Reactjs React-Redux-元素未在页面上呈现，但React-not抛出错误

我的react redux应用程序似乎有问题。我目前使用的是next.js，在使用redux时，它的行为有点怪异，所以我不确定这是否是问题所在。也就是说，我正在尝试渲染一个在对象数组中循环的组件。很简单。我的mapState函数正在工作，当我将info设置为

state.aboutMe[0]

时，我收到了第一个值。一旦我删除它并尝试遍历数组，最初，我得到一个错误，它说“必须返回一个有效的React元素（或null）。您可能返回了未定义的、数组或其他一些无效的对象。”但我可以通过将我的

info.map

包装在

el中来解决这个问题

我检查了其他问题，并在一个扩展React.Component类的类中重构了我的函数，但仍然无法进行迭代。在这种情况下，它不会在屏幕上打印任何内容。我也在底部添加了代码。如果我能澄清什么，请告诉我。提前谢谢

// This code IS working
// Needed to wrap inner return statement in JSX
const heading = ({info}) => {
    console.log(info);
    return (
    <div>{
    info.map(x => {
    return ( 
      <div>
        <h2>{x.title}</h2>
      </div>
    )
    }) 
  }
    </div>
  )
  }

  // Same code without inner return 
  const heading = ({info}) => {
    console.log(info);
    return (
    <div>
      {
        info.map(x => (
          <div>
            <h2>{x.title}</h2>
          </div>
          )
        )
      }
    </div>
  )
}

// prints info in console
    const heading = ({info}) => {
   console.log(info);
  return (
    <div>{
    info.map(x => {
    <div>
      <h2>{x.title}</h2>
    </div>
    }) 
  }
    </div>
  )
}

const mapState = state => ({ info: state.aboutMe })
const Heading = connect(mapState)(heading);

// EXAMPLE WITH CLASS
// Prints nothing to the screen but doesnt throw error
class homePage extends React.Component {
  render() {
    const { info } = this.props;
    console.log(info);
    return (
      <div> {
      info.map(x => {
        <div>
          <h2>{x.title}</h2><p>{x.text}</p>
        </div>
      })
      }
      </div>
    )
  }
}
const mapState = state => ({ info: state.aboutMe })
const Heading = connect(mapState)(homePage);

//此代码正在运行
//需要在JSX中包装内部返回语句
常量标题=（{info}）=>{
控制台日志（信息）；
返回(
{
info.map（x=>{
报税表（
{x.title}
)
}) 
}
)
}
//没有内部返回的相同代码
常量标题=（{info}）=>{
控制台日志（信息）；
返回(
{
info.map（x=>(
{x.title}
)
)
}
)
}
//在控制台中打印信息
常量标题=（{info}）=>{
控制台日志（信息）；
返回(
{
info.map（x=>{
{x.title}
}) 
}
)
}
const mapState=state=>（{info:state.aboutMe}）
const Heading=连接（映射状态）（Heading）；
//课堂示范
//不在屏幕上打印任何内容，但不会抛出错误
类。组件{
render（）{
const{info}=this.props；
控制台日志（信息）；
返回(
{
info.map（x=>{
{x.title}{x.text}

})
}
)
}
}
const mapState=state=>（{info:state.aboutMe}）
const Heading=connect（mapState）（主页）；

尝试显式使用返回内部映射。

应该

return (
  <div>
    {info.map(x => (<div>
      <h2>{x.title}</h2><p>{x.text}</p>
    </div>)
    )}
  </div>
)

返回(
{info.map（x=>(
{x.title}{x.text}

)
)}
)

---

因为映射中的div实际上没有被返回

所以匿名箭头函数不会返回任何内容。一旦使用大括号，就会丢失隐式返回。它不会抛出错误，因为没有错误。不相关，但我会为标题制作一个小组件，这样您就可以得到以下结果：这引发了一个错误

SyntaxError:Unexpected token

。我相信这是因为JSX有一个父元素。@ThomasGreco我已经更新了代码。地图里面应该没有{}哇！太棒了，成功了。我明白你的意思，但我将用括号和括号更新这个例子，这样人们可以看到。我在哪里做呢？这里。你应该在答案的左边看到一个复选标记。