Изменить опору дочернего компонента, когда s

Question

Я создаю свой сайт с помощью Gatsby и пытаюсь изменить реквизит URL компонента Plyr, когда пользователь нажимает на заголовок урока.Прямо сейчас URL установлен в this.state с извлечением данных из запроса GraphQL к Contentful.

Вот живая версия: https://brave -jepsen-d8ae28.netlify.com / courses / my-first-course

Я создал функцию handleChange для установки состояния с помощью event.target.id, но он возвращает ошибки, как только я нажимаю на тег абзаца урока.Есть идеи, что происходит?Я проверил, что идентификатор события захватывался с console.log(event.target.id), и это так, поэтому я предполагаю, что это что-то с повторным рендерингом компонента, как только я пытаюсь установить состояние.

Любая помощь приветствуется!

import React, { Component } from 'react'
import { Link, graphql } from 'gatsby'
import Layout from '../components/layout' 
import Plyr from 'react-plyr'
import '../components/plyr.css'

// On click, set the value of that elements video url to video player url value

class CourseTemplate extends Component {
    constructor(props) {
        super(props);
        this.state = {
            url: props.data.contentfulCourse.featureVideo
        };
        this.handleChange = this.handleChange.bind(this);
    };

    handleChange(event) {
        event.stopPropagation();
        // console.log(event.target.id)
        this.setState(prevState => ({
             url: event.target.id
        }));
      }

    render() {
        const courseContent = this.props.data.contentfulCourse
    return (
        <Layout>
            <Plyr key={this.state.url} type="vimeo" videoId={this.state.url}/>
            <p>{this.state.url}</p>
            <h1>{courseContent.title}</h1>
            <p>{courseContent.shortDescription}</p>
            <div>
                {courseContent.teachers.map(teacher => (
                    <div key={teacher.id}>
                        <p>by <Link to={`/teachers/${teacher.id}`}>{teacher.name}</Link></p>
                    </div>
                ))}
            </div>
            <div>
                {courseContent.lessons.map(lesson => (
                    <div key={lesson.lessonVideo}>
                        <p onClick={this.handleChange} id={lesson.lessonVideo}>{lesson.title}</p>
                    </div>
                ))}
            </div>
        </Layout>   
    )
    }
};

export default CourseTemplate

export const query = graphql`
  query CourseTemplate($id: String!) {
    contentfulCourse(id: {eq: $id}) {
      title
      shortDescription
      featureVideo
      slug
      teachers {
        id
        name
      }
      lessons {
        id
        title
        lessonVideo
        slug
      }
    } 
  }
`

Ошибки, которые я получаю:

Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property 'target' on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist().

TypeError: Cannot read property 'id' of null at ProxyComponent.eval

Answer 1

Вам не нужно вообще использовать event для этого.Вам также не нужно передавать функцию в setState, поскольку вы ничего не делаете с prevState.

import React, { Component } from "react"
import { Link, graphql } from "gatsby"
import Layout from "../components/layout"
import Plyr from "react-plyr"
import "../components/plyr.css"

class CourseTemplate extends Component {
  constructor(props) {
    super(props)
    this.state = {
      url: props.data.course.featureVideo,
    }
    this.setVideoUrl = this.setVideoUrl.bind(this)
  }

  setVideoUrl(url) {
    this.setState({ url })
  }

  render() {
    const courseContent = this.props.data.course

    return (
      <Layout>
        <Plyr type="vimeo" videoId={this.state.url} />

        <div>
          {courseContent.lessons.map(lesson => (
            <div key={lesson.id}>
              <p onClick={() => this.setVideoUrl(lesson.videoUrl)}>
                {lesson.title}
              </p>
            </div>
          ))}
        </div>
      </Layout>
    )
  }
}

export default CourseTemplate

export const query = graphql`
  query CourseTemplate($id: String!) {
    course: contentfulCourse(id: { eq: $id }) {
      title
      shortDescription
      featureVideo
      slug
      teachers {
        id
        name
      }
      lessons {
        id
        title
        videoUrl: lessonVideo
        slug
      }
    }
  }
`