React Context - “this”未定義

Question

我正在使用 React Context 來管理全局狀態。

所以我用它的提供者和它的消費者定義了我的上下文。

我有我的 videoplaying-context.js

import React from "react";
import { createContext } from 'react';

// set the defaults
const VideoContext = React.createContext({
  videoPlaying: false,
  setPlayingVideo: () => {}
});

export default VideoContext;

在我的 _app.js 中，我有：

import App from 'next/app'
import { PageTransition } from 'next-page-transitions'
import VideoContext from '../components/videoplaying-context'

class MyApp extends App {
  setPlayingVideo = videoPlaying => {
    this.setState({ videoPlaying });
  };

  state = {
    videoPlaying: false,
    setPlayingVideo: this.setPlayingVideo
  }
  render() {
    console.log('new _app.js defalt page');
    const { Component, pageProps, router, state } = this.props
    return (
      <React.Fragment>
        <VideoContext.Provider value={this.state}>
          <PageTransition timeout={300} classNames="page-transition">
            <Component {...pageProps} key={router.route} />
          </PageTransition>
        </VideoContext.Provider>
      </React.Fragment>
    )
  }
}

export default MyApp

然后在我的一個文件中，我已經把消費者：

import Layout from "../components/Layout";
import ReactPlayer from 'react-player
import VideoContext from '../components/videoplaying-context'

class Video extends React.Component {
  constructor(props) {
    super(props);
    this.triggerVideo = this.triggerVideo.bind(this);
  }
  triggerVideo(event) {
    console.log("click");
    /* doing other stuff here... */
  }
  render() {
    return (
      <VideoContext.Consumer>
        {context => (
          <Layout>
            <h1>Videos</h1>
            <div>
              <div className="group" id="process-video">
                <div
                  className="poster-image"
                  onClick={() => {
                    this.triggerVideo.bind(this);
                    context.setPlayingVideo(true);
                  }}
                />
                <ReactPlayer
                  url="https://vimeo.com/169599296"
                  width="640px"
                  height="640px"
                  config={{
                    vimeo: {
                      playerOptions: {
                        thumbnail_url: "http://placehold.it/640x640.jpg",
                        thumbnail_width: 640,
                        thumbnail_height: 640
                      }
                    }
                  }}
                />
              </div>
            </div>
            <style jsx global>{`
              .group {
                position: relative;
                height: 0;
                overflow: hidden;
                height: 640px;
                width: 640px;
              }

              .poster-image {
                background: url("http://placehold.it/640x640.jpg") center center;
                background-size: cover;
                bottom: 0;
                left: 0;
                opacity: 1;
                position: absolute;
                right: 0;
                top: 0;
                z-index: 10;
                height: 640px;
                width: 640px;
                transition: all 0.4s ease-in;
              }

              .poster-image + div {
                position: absolute;
                top: 0;
                left: 0;
                width: 640px;
                height: 640px;
              }

              .poster-image.video--fadeout {
                opacity: 0;
              }
            `}</style>
          </Layout>
        )}
      </VideoContext.Consumer>
    );
  }
}

export default Video;

因此，函數“context.setPlayingVideo(true)”工作正常並且正確地將全局狀態“videoPlaying”設置為true，但是，在引入上下文之后，“this.triggerVideo.bind(this);” 不再工作，因為“this”未定義。

我嘗試刪除它和其他東西，但我真的卡住了，我不知道如何修復它。

謝謝大家！

Answer 1

在這一行，您沒有調用方法 triggerVideo

onClick={() => { this.triggerVideo.bind(this); context.setPlayingVideo(true); }}

改成：

onClick={() => { this.triggerVideo(); context.setPlayingVideo(true); }}

或者：

onClick={() => { this.triggerVideo.bind(this)(); context.setPlayingVideo(true); }}