Question

我有一个像这样的javascript文件：

ui.js

import axios from 'axios';

let ui = {
  starting: 'string1',
  register: () => {
    axios.post('apiPath')
    .then(() => {
          ui.starting = 'string2';
    });
  }
}

export default ui;

Home.js

import React, {Component} from 'react';
import {View, Text} From 'react-native';
import ui from './ui';

export default class Home extends Component {
  render() {
    return (
      <View>
         <Text>{ui.starting}</Text>
         <Text onPress={()=>ui.register()}>Register</Text>
      </View>
    )
  }
}

如果按下注册，我希望通过Home.js文件中的电话重新呈现ui.js组件。

我知道你可以用Redux，Flux等做到这一点。但这是一个非常简单的应用程序，我不想要所有额外的开销。

Answer 1

渲染React组件后，它将保持不变，直到更新自己的状态或道具。传递ui.starting不起作用，因为数据仅在开始时读取;你的组件不关心随后的值会发生什么。

要使其正常工作，您必须修改这两个文件：

ui.js

import axios from 'axios';

let ui = {
  starting: 'string1',
  register: () => {
    axios.post('apiPath')
    .then(() => {
          return 'string2'
    });
  }
}

export default ui;

Home.js

import React, {Component} from 'react';
import {View, Text} From 'react-native';
import ui from './ui';

export default class Home extends Component {
  constructor(props) {
    super(props);
    this.state = { text: ui.starting }
  }
  async registerUI = () => {
    const newText = await ui.register();
    this.setState({ text: newText })
  }
  render() {
    return (
      <View>
         <Text>{this.state.text}</Text>
         <Text onPress={this.registerUI}>Register</Text>
      </View>
    )
  }
}

导入的值数据更改时ReactNative Rerender

1 个答案: