Javascript 更改子组件的属性（当s时）

我正在用盖茨比建立我的网站，当用户点击课程标题时，我试图改变Plyr组件的URL属性。现在，URL在

this.state

中设置，数据从GraphQL查询拉到Contentful

这是一个实时版本：

---

我创建了一个handleChange函数来设置

event.target.id

的状态，但是一旦我点击了一个lesson段落标记，它就会返回错误。知道发生了什么吗？我测试了事件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
      }
    } 
  }
`

import React，{Component}来自“React”
从“盖茨比”导入{Link，graphql}
从“../components/Layout”导入布局
从“react Plyr”导入Plyr
导入“../components/plyr.css”
//单击后，将该元素的“视频url”值设置为“视频播放器url”值
类CourseTemplate扩展组件{
建造师（道具）{
超级（道具）；
此.state={
url:props.data.contentfulCourse.featureVideo
};
this.handleChange=this.handleChange.bind（this）；
};
手变（活动）{
event.stopPropagation（）；
//console.log（event.target.id）
this.setState（prevState=>({
url:event.target.id
}));
}
render（）{
const courseContent=this.props.data.contentfulCourse
返回(
{this.state.url}

{courseContent.title}
{courseContent.shortDescription}

{courseContent.teachers.map（教师=>(
作者{teacher.name}

))}
{courseContent.lessons.map（课程=>(
{lesson.title}
))}
)
}
};
导出默认CourseTemplate
export const query=graphql`
查询CourseTemplate（$id:String！）{
contentfulCourse（id:{eq:$id}）{
标题
简短描述
特色视频
鼻涕虫
教师{
身份证件
名称
}
教训{
身份证件
标题
莱森录像
鼻涕虫
}
} 
}
`

我收到的错误：

警告：出于性能原因，将重用此合成事件。如果您看到了这一点，那么您正在访问已发布/已取消的合成事件的属性“target”。这被设置为null。如果必须保留原始合成事件，请使用event.persist（）。

---

TypeError:无法读取ProxyComponent处null的属性“id”。eval

您根本不需要为此使用

事件。您也不需要将函数传递给
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
      }
    }
  }
`

import React，{Component}来自“React”
从“盖茨比”导入{Link，graphql}
从“./组件/布局”导入布局
从“react Plyr”导入Plyr
导入“./components/plyr.css”
类CourseTemplate扩展组件{
建造师（道具）{
超级（道具）
此.state={
url:props.data.course.featureVideo，
}
this.setVideoUrl=this.setVideoUrl.bind（this）
}
setVideoUrl（url）{
this.setState（{url}）
}
render（）{
const courseContent=this.props.data.course
返回(
{courseContent.lessons.map（课程=>(
this.setVideoUrl（lesson.videoUrl）}>
{课程名称}

))}
)
}
}
导出默认CourseTemplate
export const query=graphql`
查询CourseTemplate（$id:String！）{
课程：内容课程（id:{eq:$id}）{
标题
简短描述
特色视频
鼻涕虫
教师{
身份证件
名称
}
教训{
身份证件
标题
视频网址：lessonVideo
鼻涕虫
}
}
}
`
“单击后返回错误”-您能告诉我们错误吗？我在上添加了一个实时示例，并且我得到了
TypeError:cannotreadproperty'id'of null
在localhost上我得到了一个较长的错误
出于性能原因重用了合成事件。如果您看到了这一点，那么您正在访问已发布/无效合成事件的属性
target`。这被设置为null。如果必须保留原始合成事件，请使用event.persist（）`加上的
TypeError:cannotread属性'id'为null
可能重复-您的问题是由React使用的合成事件引起的
此.setState
是异步的，因此在
事件发生时，target.id
被称为
事件。无法再安全访问target
。谢谢！这就成功了！我使用的Plyr组件出现了问题，所以我切换到另一个react播放器库并使其正常工作！