在映射语句中未定义“ this”关键字（反应）

Question

vidsAsHtml映射函数中的this关键字不断返回未定义。

我读了这个，还有其他一些关于这个的问题，但是他们的解决方案没有解决问题。我已经在地图上使用了es6语法箭头功能，但是我也尝试将其作为第二个参数，但这并不能解决问题。好奇是否有人知道为什么’this’关键字一直在这里未定义。

 import React, { useState, useEffect } from 'react'
    import axios from 'axios'

    const VideoGrid = (props) => {
      const [videos, setResource] = useState([])

      const fetchVideos = async (amount, category) => {
        const response = await axios.get('https://pixabay.com/api/videos/', {
          params: {
            key: '123456679',
            per_page: amount,
            category: category
          }
        })

        console.log(response)
        const vidsAsHtml = response.data.hits.map(vid => {
          return (
            <div className={`${props.page}--grid-content-wrapper`} key={vid.picture_id}>
              <div className={`${props.page}--grid-video`}>
                <video
                  poster="https://i.imgur.com/Us5ckqm.jpg"
                  onMouseOver={this.play()}
                  onMouseOut={this.pause()}
                  src={`${vid.videos.tiny.url}#t=1`} >
                </video>
              </div>
              <div className={`${props.page}--grid-avatar-placeholder`}></div>
              <div className={`${props.page}--grid-title`}>{vid.tags}</div>
              <div className={`${props.page}--grid-author`}>{vid.user}</div>
              <div className={`${props.page}--grid-views`}>{vid.views} 
                <span className={`${props.page}--grid-date`}> • 6 days ago</span>
              </div>
            </div>
          )
      })
      setResource(vidsAsHtml)
    }

      useEffect(() => {
        fetchVideos(50, 'people')
      }, [])

        return (
          <main className={`${props.page}--grid-background`}>
            <nav className={`${props.page}--grid-nav`}>

              <button 
                id='followButton' 
                className={`${props.page}--grid-nav-${props.titleOne}`} 
                >{props.titleOne}
              </button>

              <button 
                id='recommendedButton' 
                className={`${props.page}--grid-nav-${props.titleTwo}`} 
                >{props.titleTwo}
              </button>

              <button 
                id='subscriptionsButton' 
                className={`${props.page}--grid-nav-${props.titleThree}`} 
                >{props.titleThree}
              </button>

              <button className={`${props.page}--grid-nav-${props.titleFour}`}>{props.titleFour}</button>
              <button className={`${props.page}--grid-nav-${props.titleFive}`}>{props.titleFive}</button>
              <button className={`${props.page}--grid-nav-follow`}>FOLLOW</button>
            </nav>
            <hr className={`${props.page}--grid-hr-nav-grey`} />
            <hr className={`${props.page}--grid-hr-nav-black`} />

            <div className={`${props.page}--grid`} style={{marginTop: 'unset'}}>
              {videos}
            </div>
          </main>
        )
      }


    export default VideoGrid

Answer 1

事件处理程序道具应传递给函数。当前，您正在尝试传递this.play()和this.pause()作为事件处理程序的返回值，但无论如何都无法正常工作。

而且React也不会通过将该元素提供给事件处理程序this，但是您可以通过event.target以下方式访问它：

<video
  poster="https://i.imgur.com/Us5ckqm.jpg"
  onMouseOver={event => event.target.play()}
  onMouseOut={event => event.target.pause()}
  src={`${vid.videos.tiny.url}#t=1`} >
</video>