React hook, ComponentDidMount [trùng lặp]
Trong tài liệu chính thức của video.js https://docs.videojs.com/tutorial-react.html
chúng ta có
componentDidMount() {
// instantiate Video.js
this.player = videojs(this.videoNode, this.props, function onPlayerReady() {
console.log('onPlayerReady', this)
});
}
Tôi muốn tạo thành phần chức năng với các hook
export default function VideoPlayer(props) {
const player = useRef(null);
const videoNode = useRef(null);
useEffect(() => {
player.current = videojs(videoNode.current, props);
return () => {
if (player.current) {
player.current.dispose()
}
}
}, []);//I have problem with dependency array
return (
<div data-vjs-player>
<video ref={videoNode} className="video-js"/>
</div>
)
}
Tôi có cảnh báo
ESLint: Sử dụng React HookEffect thiếu phụ thuộc: 'props'. Bao gồm nó hoặc loại bỏ mảng phụ thuộc. (React-hooks / expustive-deps)
Nếu tôi thay đổi mảng phụ thuộc []
thành [props]
useEffect
chạy trên mỗi lần hiển thị, tôi chỉ muốn chạy nó vào lần đầu tiên, nhưcomponentDidMount
Làm cách nào tôi có thể tạo chính xác componentDidMount
bằng cách sử dụng hook?
Trả lời
Như đã giải thích ở đây , bạn đã sử dụng useEffect
như dự định. Một mảng phụ thuộc trống có nghĩa là nó sẽ chỉ chạy một lần (dưới dạng componentDidMount
). Lỗi được chỉ ra thông báo cho bạn biết nếu bạn thực sự có ý định khác, hiệu ứng sẽ không hiển thị lại.
Để loại bỏ lỗi, bạn có thể chỉ cần dán nhận xét sau // eslint-disable-line react-hooks/exhaustive-deps
vào cuốiuseEffect
useEffect(() => {
player.current = videojs(videoNode.current, props);
return () => {
if (player.current) {
player.current.dispose()
}
}
}, []); // eslint-disable-line react-hooks/exhaustive-deps
TÀI LIỆU THAM KHẢO
Câu trả lời này giải thích nó kỹ hơn