[英]connect not change the props of child component when the prop object modified
[英]Change prop of child component when s
我正在使用Gatsby構建我的網站,並且試圖在用戶單擊課程標題時更改Plyr組件的URL屬性。 現在,URL已在this.state
設置,數據已從GraphQL查詢拉至Contentful。
這是一個實時版本: https : //brave-jepsen-d8ae28.netlify.com/courses/my-first-course
我創建了一個handleChange函數,以使用event.target.id
設置狀態,但是一旦單擊課程段落標記,它就會返回錯誤。 知道發生了什么嗎? 我測試了事件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
您根本不需要使用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
}
}
}
`
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.