Set State가 React Native Slider에서 값을 변경하지 않습니다.

Question

그래서 화면의 텍스트 구성 요소 값을 변경하는 방법을 알아 내려고 노력했습니다. 불행히도 값은 내가하는 일과 상관없이 동일하게 유지됩니다. 이 값은 터미널에 인쇄되지만 화면의 텍스트는 변경되지 않습니다. 누구든지 올바른 방향으로 나를 가리킬 수 있습니다. 어떤 도움을 주시면 감사하겠습니다.

const Speed =({navigation}) =>{ 

     // Set the Default State 
     this.state = { age: 18 } 

     getVal = (val) => { 
      console.warn(val); 
     } 
     onChange = (v) => { 

      this.setState({val:Math.round(v)}); 
      console.log(this.state); 
     } 

     return(
      <View > 
      <Slider 
       minimumValue = {0} 
       maximumValue = {50} 
       value={this.state.age} 
       onValueChange={val => this.setState({ age: val })} 
       onSlidingComplete={ val => this.getVal(val)} 

      /> 
      <Text> {this.state.age}</Text> 

      <Button 
       style = {{margin:50,backgroundColor:'black'}} 
       title="Slow" 
      /> 
      <Button 
       style = {{margin:50,backgroundColor:'black'}} 
       title="Medium" 
      /> 
      <Button 
       style = {{margin:50,backgroundColor:'black'}} 
       title="Fast" 
      /> 
      </View> 
     ); 
    } 

Answer 1

당신의 속도 구성 요소가 stateless 함수, 구성 요소 클래스를 확장하여 그것을 다시 작성하려고합니다.

class Speed extends Component { 
    constructor() { 
     super(); 
     this.state = { age: 18 } 
     this.getVal = this.getVal.bind(this); 
     this.onChange = this.onChange.bind(this); 
    } 
     // Set the Default State 

    getVal(val) { 
     console.warn(val); 
    } 
    onChange(v) { 
     this.setState({ val: Math.round(v) }); 
     console.log(this.state); 
    } 
    render() { 
     return (
      <View > 
       <Slider 
        minimumValue={0} 
        maximumValue={50} 
        value={this.state.age} 
        onValueChange={val => this.setState({ age: val })} 
        onSlidingComplete={val => this.getVal(val)} 

       /> 
       <Text> {this.state.age}</Text> 

       <Button 
        style={{ margin: 50, backgroundColor: 'black' }} 
        title="Slow" 
       /> 
       <Button 
        style={{ margin: 50, backgroundColor: 'black' }} 
        title="Medium" 
       /> 
       <Button 
        style={{ margin: 50, backgroundColor: 'black' }} 
        title="Fast" 
       /> 
      </View> 
     ); 
    } 
}