हैलो मुझे नीचे दिए गए घटक को फिर से प्रस्तुत करने में समस्या है, आप पहली स्क्रीन के लिए मेरा कोड देख सकते हैं जिसमें मेरे पास एक कस्टम घटक है:

class Ahelle extends React.Component{
    constructor(props){
        super(props)
        this.state={
            mamad:10
        }
    }
    render(){
        return (
            <View style={{backgroundColor:"white"}}>
                <ScrollView>
              <CustomSlider  defaultValue={0} />
            <CustomSlider  defaultValue={this.state.mamad} disabled={true}/>
           
           <TouchableOpacity style={{width:100,height:100,alignSelf:"center"}} onPress={()=>{this.setState({mamad:20})}}><Text>dddd</Text></TouchableOpacity>
              </ScrollView>
            </View>
          
        );
    }
 
}

यहां मेरे पास एक कस्टम घटक है और मैं दिखाने के लिए एक डिफ़ॉल्ट मान पास करता हूं लेकिन जब मैं राज्य बदलता हूं, तो यह उस मूल्य को नहीं बदल रहा है जिसे मैंने प्रोप के रूप में पारित किया था। यहाँ मेरा कस्टम स्लाइडर घटक और उसकी स्थिति, सहारा और कोई अन्य विवरण है।

class Test extends React.Component{
    constructor(props){
        console.log(props)
        super(props)
        this.state = {
            value: props.defaultValue
          };
       
    }
    render(){
        return(

                   <Slider
    style={{width: wp("70%")}}
    value={this.state.value}
  />
                 
         )
    }
}
export default Test;

कार्रवाई में समस्या देखें अपना समय देने के लिए धन्यवाद

2
em.d 21 जुलाई 2020, 09:08

2 जवाब

सबसे बढ़िया उत्तर

आपका स्लाइडर घटक पास किए गए अद्यतन प्रोप मानों के साथ कभी भी कुछ नहीं करता है। संयोग से, यह स्थानीय घटक राज्य में पारित प्रोप को स्टोर करने के लिए एक प्रतिक्रिया विरोधी पैटर्न भी है। आप इनका सीधे सेवन कर सकते हैं और करना चाहिए। बस this.state.mamad को value प्रोप में पास करें और उपभोग करें। आप किसी भी अतिरिक्त प्रॉप्स को स्लाइडर कंपोनेंट में फैलाकर पास भी कर सकते हैं।

class Test extends React.Component {
  render() {
    return (
      <Slider
        style={{ width: wp("70%") }}
        value={this.props.value}
        {...this.props}
      />
    );
  }
}

export default Test;

प्रयोग

<CustomSlider value={this.state.mamad} disabled={true} />

अगर आप वास्तव में पास किए गए defaultValue प्रोप को स्टोर करना चाहते हैं और उसे अपडेट रखना चाहते हैं, तो componentDidUpdate जीवनचक्र फ़ंक्शन को लागू करें। ध्यान दें, यह अनुशंसित समाधान नहीं है।

class Test extends React.Component {
  constructor(props) {
    console.log(props);
    super(props);
    this.state = {
      value: props.defaultValue
    };
  }

  componentDidUpdate(prevProps) {
    const { defaultValue } = this.props;
    if (prevProps.defaultValue !== defaultValue) {
      this.setState({ value: defaultValue});
    }
  }

  render() {
    return <Slider style={{ width: wp("70%") }} value={this.state.value} />;
  }
}

export default Test;
1
Drew Reese 21 जुलाई 2020, 10:34

आपका कोड सही है। मैंने इसका परीक्षण किया।

ऐप.जेएस

import React from "react";
import { Text, View, ScrollView, TouchableOpacity } from "react-native";
import CustomSlider from "./CustomSlider";

export default class Ahelle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      mamad: 10,
    };
  }
  render() {
    return (
      <View style={{ backgroundColor: "white" }}>
        <ScrollView>
          <CustomSlider defaultValue={0} />
          <CustomSlider defaultValue={this.state.mamad} disabled={true} />

          <TouchableOpacity
            style={{ width: 100, height: 100, alignSelf: "center" }}
            onPress={() => {
              this.setState({ mamad: 20 });
            }}
          >
            <Text>dddd</Text>
          </TouchableOpacity>
        </ScrollView>
      </View>
    );
  }
}

CustomSlider.js

import React from "react";
import { Text } from "react-native";

export default class CustomSlider extends React.Component {
  render() {
    return <Text>defaultValue: {this.props.defaultValue}</Text>;
  }
}

नतीजा: परिणाम देखें

-1
Mohammad Golkar 21 जुलाई 2020, 09:55