javascript - s时改变子组件的prop
问题描述
我正在使用 Gatsby 构建我的网站,并且在用户单击课程标题时尝试更改 Plyr 组件的 URL 属性。现在 URL 设置在this.state
从 GraphQL 查询到 Contentful 的数据中。
这是一个现场版本:https ://brave-jepsen-d8ae28.netlify.com/courses/my-first-course
我创建了一个 handleChange 函数来使用 设置状态event.target.id
,但是一旦我单击课程段落标签,它就会返回错误。知道发生了什么吗?我测试了事件 Id 是用 a 捕获的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
解决方案
您根本不需要为此使用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
}
}
}
`
推荐阅读
- typescript - TypeScript 泛型类型“{ result: true }”不可分配给类型“T”
- javascript - 创建一个 10x10 字段的字段
- itext - iText PDFSweep RegexBasedCleanupStrategy 在某些情况下不起作用
- laravel - Laravel - 获取数据中关系问题中的搜索过滤器
- java - 您可以在 while 语句中检查多个字符串吗?
- java - Jsoup - 将 html 文本转换为字符串列表
- react-native - 使背景图像从按钮单击按钮上消失,TouchableWithoutFeedback - React Native?
- wordpress - 将实时 wordpress 迁移到本地 xampp 错误
- android-mediaplayer - 恢复通知播放控件?
- angular - 在构建数据之前从 HTTP GET 返回使用 Observable 的 Angular 6 函数