'this' 关键字在映射语句 (React) 中未定义

Question

vidsAsHtml 映射函数中的 this 关键字一直返回 undefined。

我阅读了this，以及其他几个关于此的 SO 问题，但他们的解决方案并没有解决问题。我已经为地图使用了 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>

Answer 2

您可以为此使用ref，

let vidRef = React.createRef();

你应该单独创建函数，

const playVideo = () => {
   // You can use the play method as normal on your video ref
    vidRef.current.play();
};

const pauseVideo = () => {
   // Pause as well
   vidRef.current.pause();
};

提供参考video，

<video
  ref = {vidRef}   //Provide ref here
  poster="https://i.imgur.com/Us5ckqm.jpg"
  onMouseOver={() => playVideo()}
  onMouseOut={() => pauseVideo()}
  src={`${vid.videos.tiny.url}#t=1`} >
</video>

Demo