在 state 更改后，React 组件不呈现

Question

Hello I have a problem with re rendering the component below you can see my code for the first screen within that I have a custom component:

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>
          
        );
    }
 
}

Here I have a custom component and I pass a default value for showing but when I change the state, it is not changing the value I passed as props. here is my custom slider component and its state, props and any other details.

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;

SEE THE PROBLEM IN ACTION Thank you for your time

Answer 1

Your slider component never does anything with updated prop values that are passed. Coincidentally, it's also a react anti-pattern to store passed props in local component state. You can, and should, consume them directly. Just pass this.state.mamad to the value prop and consume. You can also pass along any additional props by spreading them in to the slider component.

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

export default Test;

Usage

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

If you really wanted to store the passed defaultValue prop and keep it updated, then implement the componentDidUpdate lifecycle function. Note, this is not the recommended solution.

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;

Answer 2

Your code is correct. I tested it.

App.js

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>;
  }
}

Result: View Result