如何在包装 function 中使用 array.map 并返回映射数组？

Question

我可能有一个明显的问题，但我无法解决它。 我想 map function ShowStoryListView mappedArray返回mappedArray 。 function 将props作为包含stories的输入。

但是，当我尝试执行 function 时出现错误：

Uncaught TypeError: story.map is not a function

function ShoWStoryListView (props) {
      const story = props

      const mappedArray = story.map((story, index) => (
            <MDBRow id={index} key={story.id} style={{ margin: '10px', display: 'inline-block' }}>
              <MDBCol>
                <MDBCard style={{ width: '22rem' }}>
                  <MDBCardImage className="img-fluid" src={pic} waves />
                  <MDBCardBody>
                    <MDBCardTitle>Title: {story.title}</MDBCardTitle>
                    <MDBCardTitle>Place: {story.place}</MDBCardTitle>
                    <MDBCardTitle>Author: {story.author.username}</MDBCardTitle>
                    <MDBCardText>{story.content}</MDBCardText>
                    <audio controls src={story.audio.url}>
                      Your browser does not support the
                      <code>audio</code> element.
                    </audio>
                    {story.story_owner_permission === true ? <MDBBtn href="#">Click me</MDBBtn> : null}
                    <Link
                      to={`/story/${story.id}`}
                      className="badge badge-warning"
                      style={{ marginLeft: '100px' }}
                    >
                      Details
                    </Link>
                  </MDBCardBody>
                </MDBCard>
              </MDBCol>
            </MDBRow>
          )
          )

     return (

      {mappedArray}

     ) 
    }

当我在mappedArray之外使用ShoWStoryListView时，它会以某种方式工作。 我想知道为什么它在 function 内部不起作用？

我很高兴任何澄清。

Answer 1

使用function ShoWStoryListView ({ story }) {或const { story } = props ？