Question

我需要你的帮助。我在更新页面上的数据时遇到问题。基本上，我有一个主页，其中包含从登录名中检索到的“ FirstName：...”，“ LastName：...”之类的数据。

登录完成后，每次启动该应用程序时，您将自动进入首页页面。这样，我就可以在“主页”页面上检索信息。

问题在于用户可以通过表单（ ModifyProfile ）修改此数据，并且一旦完成数据就不会更新。 我该如何更新它们？谢谢。

Homepage.js

class HomepageUtente extends Component {
    constructor(props) {
        super(props);
        this.state = {

        }
    }
render() {

    const FirstName = global.utente.data.Person.FirstName;
    const LastName = global.utente.data.Person.LastName;

    return (

        <View style={style.container}>
            <View style={style.page}>
                <Icon name="user-circle" color="#64c7c0" size={70} onPress={() => Actions.yourprofile({ cf: Username } )} />

                <Text
                    style={{ textAlign: 'center', fontSize: 20, }}>{"Welcome"}
                </Text>
                <Text style={{ textAlign: 'center', fontSize: 20, color: '#64c7c0', fontWeight: 'bold' }}>
                    {FirstName} {LastName}
                </Text>
                    <Text style={{ color: '#64c7c0', paddingTop: 20 }} onPress={() => Actions.ModifyProfile({ cf: Username })} >Modify Profile</Text>}

            </View>
        </View>
    )
}
}

修改个人资料

    export default class ModificaProfilo extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
    findUtente(cf) {
      //Search data cf in the db
      //......
  //......
    .then(response => {
      let utente = response.docs[0];
        console.log("Utente: " + utente)
        console.log("Sei qui 1")
        utente.Person.FirstName = this.state.FirstName;
        utente.Person.LastName = this.state.LastName;
          global.utente.db.localdb().put(utente);
    })
    .catch(function(err) {
      console.log(JSON.stringify(err));
    })

}

render() {
  return (
    <View style={style.container}>
      <View style={style.page}>
        <KeyboardAwareScrollView>

          <View style={style.inputContainer}>
            <TextInput
              style={style.inputs}
              placeholder="Name"
              placeholderTextColor="#64c7c0"
              keyboardType="default"
              underlineColorAndroid="grey"
              onChangeText={FirstName =>
                this.setState({ FirstName })
              }
            />
          </View>

          <View style={style.inputContainer}>
            <TextInput
              style={style.inputs}
              placeholder="Surname"
              placeholderTextColor="#64c7c0"
              keyboardType="default"
              underlineColorAndroid="grey"
              onChangeText={LastName => 
                this.setState({ LastName })}
            />
          </View>
          <View style={style.footer}>
            <TouchableOpacity
              style={[style.button, style.buttonOK]}
              onPress={() => this.findUtente(this.props.cf)}
            >
              <Text style={style.buttonTesto}>Modifica</Text>
            </TouchableOpacity>
          </View>

Answer 1

实际上，您可以这样做，但您不应该这样做。让我们先解决它。

Homepage.js中的组件，我们称之为A；
ModifyProfile中的组件，我们称之为B；

您需要引用组件A，然后调用A.forceUpdate()。这意味着您在global.A = this中添加了Homepage.js；获取新数据后，在global.A.forceUpdate()中添加ModifyProfile；

为什么：只有在组件的状态或属性发生变化时，React Component才会重新渲染，这就是为什么您需要调用forceUpdate来使组件A再次无条件重新渲染。

如果您将FirstName更改为global.utente.data.Person.FirstName = 'NewName'，则组件A无法检测到更改事件。

顺便说一句，您应该使用redux之类的状态容器来帮助您，而不是使用全局变量。您可以将FirstName作为道具。

我推荐dvajs，它很容易学习，您可以只关注数据和流程，而不必担心组件是否应该在大多数时间进行更新。

并且有一个dvajs的启动器，您可以快速运行它，然后执行以下操作： react-native-dva-starter

如果我误解了你的问题，那就算了。

更新页面数据

1 个答案: