vidsAsHtml映射函数内的this关键字不断返回未定义。
我读了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
您可以为此使用ref
,
import React, { useRef, useEffect } from 'react';
const vidRef = useRef();
您应单独创建函数,
playVideo = () => {
// You can use the play method as normal on your video ref
vidRef.play();
};
pauseVideo = () => {
// Pause as well
vidRef.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>