如何在包裝 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 ？