'this' 关键字在 Mapping Statement (React) 中未定义 [英] 'this' keyword is undefined inside Mapping Statement (React)

问题描述

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

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

 import React, { useState, useEffect } from 'react'从 'axios' 导入 axiosconst VideoGrid = (道具) =>{const [视频，setResource] = useState([])const fetchVideos = async (amount, category) =>{const response = await axios.get('https://pixabay.com/api/videos/', {参数:{键:'123456679'，每页:金额，类别:类别}})控制台日志(响应)const vidsAsHtml = response.data.hits.map(vid => {返回 (<div className={`${props.page}--grid-content-wrapper`} key={vid.picture_id}><div className={`${props.page}--grid-video`}><视频海报="https://i.imgur.com/Us5ckqm.jpg"onMouseOver={this.play()}onMouseOut={this.pause()}src={`${vid.videos.tiny.url}#t=1`} ></视频>

<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 天前

)})设置资源(vidsAsHtml)}useEffect(() => {fetchVideos(50, '人')}, [])返回 (<main className={`${props.page}--grid-background`}><nav className={`${props.page}--grid-nav`}><按钮id='关注按钮'className={`${props.page}--grid-nav-${props.titleOne}`}>{props.titleOne}<按钮id='推荐按钮'className={`${props.page}--grid-nav-${props.titleTwo}`}>{props.titleTwo}<按钮id='订阅按钮'className={`${props.page}--grid-nav-${props.titleThree}`}>{props.titleThree}<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'}}>{视频}

</main>)}导出默认 VideoGrid

解决方案

Event handler props 应该被传递一个函数.当前，您正尝试将 this.play() 和 this.pause() 的返回值作为事件处理程序传递，这无论如何都行不通.

此外，React 不会通过 this 将元素提供给事件处理程序，但您可以通过 event.target 访问它:

event.target.play()}onMouseOut={event =>event.target.pause()}src={`${vid.videos.tiny.url}#t=1`} ></视频>

The this keyword inside the vidsAsHtml mapping function keeps returning undefined.

I read this, and a couple other SO questions about this but their solutions did not solve the problem. I'm already using es6 syntax arrow function for the map, but I've also tried putting in this as a second argument, which didn't solve the issue. Curious if anyone knows why 'this' keyword keeps coming up as undefined here.

 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

解决方案

Event handler props are expected to be passed a function. Currently you are trying to pass the return values of this.play() and this.pause() as event handlers, which wouldn't work anyway.

Also React doesn't make the element available to the event handler via this, but you can access it via 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>

这篇关于'this' 关键字在 Mapping Statement (React) 中未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！