为什么 .map 在控制台上返回值而不是在 React 上定义的元素中返回值？

Question

我有一组对象。我需要在 React 渲染元素（在 Gatsby 项目中）中注入每个对象的键值。当我检查我的调试器时，获得了正确的值，但元素没有呈现。我缺少什么？

我的对象是这样的：

const obj= [ 
0: {heading: "text, descriptionText: "text"}
1: {heading: "text, descriptionText: "text"}
2: {heading: "text, descriptionText: "text"}
3: {heading: "text, descriptionText: "text"}
4: {heading: "text, descriptionText: "text"}
]

map 语句看起来像这样，每个 console.log 打印准确的数据：

return ( <div>
        {console.log('slides: ', slides)}
        {slides.map((slide: any, i: number) => {
          <div>
            {console.log('heading: ', slide.heading)}
            {console.log('text: ', slide.descriptionText)}
            <h3 key={i}>
              {slide.heading.toString()}
            </h3>
            <p key={i}>
              {slide.descriptionText}
            </p>
          </div>
        })})

Answer 1

在箭头函数中使用花括号时必须添加return。否则，您可以在 = >

之后删除大括号

        {console.log('slides: ', slides)}
        {slides.map((slide: any, i: number) => {
          return(<div>
            {console.log('heading: ', slide.heading)}
            {console.log('text: ', slide.descriptionText)}
            <h3 key={i}>
              {slide.heading.toString()}
            </h3>
            <p key={i}>
              {slide.descriptionText}
            </p>
          </div>)
        })})

为什么 .map 在控制台上返回值而不是在 React 上定义的元素中返回值？

Why is .map returning values on console but not in elements defined on React?

arrays

reactjs

object

gatsby

array.prototype.map