मैंने क्या प्रयास किया है और मेरी समस्या मैंने एक बाहरी फ़ंक्शन बनाने और इसे onClick के माध्यम से चलाने के साथ शुरू किया ... यह आंशिक रूप से काम करता है क्योंकि यह क्लिक पर अलर्ट भेजता है। test.ghostrez.net पर सेवा पृष्ठ देखें। अलर्ट को ट्रिगर करने के लिए छोटी छवियों पर क्लिक करें जो जो अगर कथन, state.active:value, और state.id:value दिखाती हैं। इसलिए मुझे पता है कि सही बयानों को ट्रिगर किया जा रहा है।
मेरी समस्या यह है कि मैं इच्छित के रूप में निर्धारित स्थिति के बजाय state[i].setState is not a function लौटाता रहता हूं।
मैंने फ़ंक्शन को आंतरिक और बाह्य रूप से class Player पर रखा है और इसने वही समस्या लौटा दी है।
जैसा कि सुझाव दिया गया है मैंने फ़ंक्शन को एक आंतरिक एरो फ़ंक्शन में बदल दिया है यहां.
मैंने इसे एक const changeActiveField = () => {stuff in here} में बदल दिया
मैंने इसे const changeActive = changeActiveField.bind(this) *सुझाए गए अनुसार बाँधने का प्रयास किया यहां और यहां
एक ही त्रुटि लौटाने का प्रत्येक प्रयास 
यह वही है जो डिबग कंसोल देता है 
यह मेरा वर्तमान कार्य है इसकी प्रक्रिया > 1. यदि active object में state की छवि क्लिक की गई समान id है - कुछ भी न करें , 2. यदि active object की छवि से भिन्न id है, तो सेटस्टेट active:value से false पर क्लिक करें और फिर वापस आएं और खोजें जिस ऑब्जेक्ट पर क्लिक की गई id === id इमेज और setState active:true false से।
function changeActiveField(im, state) {
console.log(state);
for (var i = 0; i < state.length; i++) {
if (state[i].active === true && state[i].id === im) {
return alert("if " + state[i].active + " " + state[i].id);
} else if (state[i].active === true && state[i].id !== im) {
alert(" elseif set false " + state[i].active + " " + state[i].id);
state[i].setState(false);
} else if (state[i].id === im) {
alert("elseif make true " + state[i].active + " " + state[i].id);
state[i].setState({ active: true });
return;
} else {
return alert("Nope");
}
}
}
changeActiveField को यहां कहा जाता है
<div className="thumbs">
{this.state.ids.map((i) => (
<>
<Image
className="carouselitem"
rounded
onClick={() => changeActiveField(i.id, this.state.ids)}
src={"http://img.youtube.com/vi/" + i.id + "/hqdefault.jpg"}
size="small"
/>
<h2>
{i.id} {i.active ? "true" : "false"}
</h2>
</>
))}
</div>
कोई मजाक नहीं मैं इसे 4 दिनों से हल करने की कोशिश कर रहा हूं। मैं उलझन में हूं।
2 जवाब
ऐसा प्रतीत होता है कि आप किसी व्यक्ति id पर setState करने का प्रयास कर रहे हैं, लेकिन आप वास्तव में id.setState को कॉल करने का प्रयास कर रहे हैं।
आपके द्वारा प्रदान किए गए कोड से, प्रत्येक id मूल रूप से इस तरह दिखता है:
{active: //true/false, id: //some Int}
लेकिन हकीकत में आपका कोड इसकी तलाश में है ...
{active: //true/false, id: //some Int, setState: () => //do something here}
आपको आईडी की उस सरणी में अपनी विशिष्ट id ऑब्जेक्ट को खोजने का तरीका संभालने की आवश्यकता होगी, और फिर अपने पूर्ण state को वर्तमान स्थिति और आपके द्वारा किए जा रहे संशोधन के साथ अपडेट करना होगा।
संपादित करें: // मेरी गलती, सोच नहीं रहा था।
मैं एक नए चर में आपके राज्य सरणी की एक प्रति बनाने की सलाह दूंगा, फिर उस नए सरणी चर के माध्यम से मैपिंग करके अपने उत्परिवर्तन बनाऊंगा। फिर अपना राज्य उस नई सरणी वस्तुओं के आधार पर सेट करें ...
let newIdArr = this.state.ids
newIdArr.map(id => //do your stuff here...)
this.setState({...this.state, ids: newIdArr})
अंत में, जब आप setState(false) आप अपने पूरे राज्य को ओवरराइट कर रहे होते हैं जहां यह सिर्फ false होगा, रास्ते में आपकी सभी आईडी खो जाएगी।
यह मेरे बालों को खींचने में बहुत दिनों का अंतिम उत्पाद है ... लेकिन यह अब काम करता है और उम्मीद है, यह किसी और की मदद करता है। (पूर्ण घटक कोड अंतिम)
मैंने रेंडर की जा रही छवि में एक गुमनाम फ़ंक्शन का उपयोग किया है। यह ऑब्जेक्ट को this.state सरणी में ढूंढता और अपडेट करता है, सबसे पहले, यह उन आईडी को ढूंढता है जो "carouselitem" से पास किए गए मान से मेल नहीं खाते हैं। और उनके सक्रिय मानों को false में अपडेट करता है, फिर वह id ढूंढता है जो पास किए गए मान से मेल खाता है और उसे सच.
पुराना function changeActiveField अब है
onClick={() => {
this.setState((prevState) => ({
ids: prevState.ids.map((ob) =>
ob.id !== i.id
? { ...ob, active: false }
: { ...ob, active: true }
),
}));
}}
मैंने अपने firstActiveId को भी कक्षा में स्थानांतरित कर दिया है। यह array object को active: true के साथ ढूंढता है और id मान लौटाता है, जिसे उपयुक्त वीडियो प्रदर्शित करने और चलाने के लिए activevid में रखा गया है।
firstActiveId = () => {
for (var i = 0; i < this.state.ids.length; i++) {
if (this.state.ids[i].active) {
return this.state.ids[i].id;
}
}
};
प्लेबैक प्रदान करने के लिए firstActiveId का उपयोग इस प्रकार किया जाता है।
<div className="activevid">
<Embed
active
autoplay={true}
color="white"
hd={false}
id={this.firstActiveId(this.state.ids)}
iframe={{
allowFullScreen: true,
style: {
padding: 0,
},
}}
placeholder={
"http://img.youtube.com/vi/" +
this.firstActiveId(this.state.ids) +
"/hqdefault.jpg"
}
source="youtube"
/>
</div>
सुझाव: मेरे जैसे कामों को अधिक जटिल न बनाएं
पूर्ण घटक
import React, { Component } from "react";
import { Embed, Image } from "semantic-ui-react";
import "./Player.css";
export default class Player extends React.Component {
constructor(props) {
super(props);
this.state = {
ids: [
{
id: "iCBvfW08jlo",
active: false,
},
{
id: "qvOcCQXZVg0",
active: true,
},
{
id: "YXNC3GKmjgk",
active: false,
},
],
};
}
firstActiveId = () => {
for (var i = 0; i < this.state.ids.length; i++) {
if (this.state.ids[i].active) {
return this.state.ids[i].id;
}
}
};
render() {
return (
<div className="carouselwrap">
<div className="activevid">
<Embed
active
autoplay={true}
color="white"
hd={false}
id={this.firstActiveId(this.state.ids)}
iframe={{
allowFullScreen: true,
style: {
padding: 0,
},
}}
placeholder={
"http://img.youtube.com/vi/" +
this.firstActiveId(this.state.ids) +
"/hqdefault.jpg"
}
source="youtube"
/>
</div>
<div className="thumbs">
{this.state.ids.map((i) => (
<>
<Image
className="carouselitem"
rounded
onClick={() => {
this.setState((prevState) => ({
ids: prevState.ids.map((ob) =>
ob.id !== i.id
? { ...ob, active: false }
: { ...ob, active: true }
),
}));
}}
src={"http://img.youtube.com/vi/" + i.id + "/hqdefault.jpg"}
size="small"
/>
</>
))}
</div>
</div>
);
}
}