this.setState 在使用 onChangeText React Native 時不會改變 state

Question

我嘗試了一些方法來獲取 setState() 來更新 state 的值。 目前<TextInput>中的文本發生了變化，但this.state中的值沒有變化。

我將console.log放在正確的位置，我嘗試編寫外部函數，我弄亂了變量的名稱，但似乎沒有任何效果。

import * as React from 'react';
import { View, Text, TextInput, TouchableHighlight, Dimensions, StyleSheet } from "react-native";

import PropTypes from "prop-types";

class EditNote extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      title: '',
      text: '',
      id: ''
    }
  }

  // TODO: Change textboxes to match the props from the NoteList
  static getDerivedStateFromProps(props){
    return(
      {...props.route.params}
    )
  }

  render(){
    return(
      <View style={s.container}>
        <View style={s.titleContainer}>
          <Text style={s.titleText}>Edit Note</Text>
          <View style={{flex: 1}}/>
        </View>
        <View style={s.inputContainer}>
          <TextInput
            style={{...s.input, ...s.titleInput}}
            autoCapitalize='words'
            keyboardAppearance='dark'
            placeholderTextColor='#DDD'
            onChangeText={(title) => { this.setState({title: title}, () => console.log(this.state)) }}
            defaultValue={this.state.title}
          />
          <TextInput
            style={{...s.input, ...s.textInput}}
            autoCapitalize='sentences'
            keyboardAppearance='dark'
            placeholderTextColor='#DDD'
            multiline
            onChangeText={(text) => { this.setState({text: text}, () => console.log(this.state)) }}
            defaultValue={this.state.text}
          />
        </View>
        
        <View style={s.buttonContainer}>
          <TouchableHighlight
            style={s.backButton}
            onPress={() => this.props.nav.navigate('NoteListView')}
            underlayColor='#300030'
          >
            <Text style={s.buttonText}>Cancel</Text>
          </TouchableHighlight>
          <TouchableHighlight
            style={s.addButton}
            onPress={() => {
              console.log(this.state.note)
              this.props.nav.navigate('NoteListView', {note: this.state, mode: 'edit'})
            }}
            underlayColor='#300030'
          >
            <Text style={s.buttonText}>Edit</Text>
          </TouchableHighlight>
        </View>
      </View>
    )
  }
}

export default EditNote

Answer 1

我剛剛意識到這是兩個部分的問題。

第一個問題是props.route.params不受后續render()調用的影響。 這意味着即使您重新渲染組件，也會使用相同的初始屬性。

第二個是getDerivedStateFromProps() 。 每次調用渲染 function 時，它都會在它之前調用getDerivedStateFromProps() ，將 state 設置為初始路由參數。

這個問題可以通過以下方式解決：

1. 在初次使用后清除渲染 function 中的初始路由參數。 在render() function 的開頭有點像這樣的東西會起作用。 this.props.route.params = undefined
2. 在 state 中使用 if 語句和變量來調節道具何時應該更新 state。
3. 重構代碼以使用道具

選項 3 是應該如何正確完成事情，但最佳解決方案取決於您的代碼如何工作。