reactjs - 我应该在哪里使用 setState？

Question

在我的 react native 项目中，我正在尝试制作一个基本的货币转换器。在 home.js 中，您可以看到一个名为 InputWithButton 的组件。这个组件有一个按钮，它有一个buttonText，它的值是baseCurrency。当我单击此按钮时，CurrencyList 屏幕打开。在 CurrencyList 中有一个包含货币值的平面列表。我可以在 CurrencyList 的平面列表中选择一个值，然后我可以将此值发送到主屏幕，this.props.navigation.navigate('Home',{selected:item}) 但是当我使用返回按钮返回主屏幕时，我不知道如何更改 InputWithButton 组件中 buttonText 的值。我不知道我应该在哪里使用 setState？

主页.js

import React, {Component} from 'react';
import {View, Text, Button} from 'react-native';
import {InputWithButton} from '../components/TextInput';

//const TEMP_BASE_CURRENCY = 'USD';
//const TEMP_CONVERT_CURRENCY = 'GBP';

class Home extends Component {
  constructor(props) {
    super(props);

    this.state = {
      baseCurrency: 'TRY', //Başlangıç olarak sayfa açıldığında gelecek olan değerler
      convertCurrency: 'USD',

      amount: null,
      result: '',
      date: '',
    };
    //const selected = this.props.route.params;
  }

  calculate = () => {
    const amount = this.state.amount;

    let url =
      'https://api.exchangeratesapi.io/latest?base=' + this.state.baseCurrency;
    fetch(url, {
      method: 'GET',
    })
      .then((res) => res.json())
      .then((data) => {
        const date = data.date;
        const result = (
          data.rates[this.state.convertCurrency] * amount
        ).toFixed(2);

        this.setState({
          result,
          date,
        });
      })
      .catch((error) => {
        console.log(error);
      });
  };

  handleChangeText = (text) => {
    //Yazıda değişim algılandığında api işlemleri başlasın

    this.setState(
      {
        amount: text,
      },
      this.calculate,
    );
  };

  handlePressBaseCurrency = () => {
    //flatlist sayfası açılsın
    const {navigation} = this.props;
    navigation.navigate('CurrencyList');
  };

  handlePressConvertCurrency = () => {
    //flatlist sayfası açılsın
  };

  render() {
    const {baseCurrency, convertCurrency, result} = this.state;
    return (
      <View>
        <InputWithButton
          buttonText={baseCurrency}
          onPress={this.handlePressBaseCurrency}
          keyboardType="numeric"
          onChangeText={(text) => this.handleChangeText(text)}
        />
        <InputWithButton
          editable={false}
          buttonText={convertCurrency}
          onPress={this.handlePressConvertCurrency}
          value={result}
        />
        <Button
          title="Ceviri"
          onPress={() => this.props.navigation.navigate('Ceviri')}
        />
      </View>
    );
  }
}

export default Home;

CurrencyList.js

import React, {Component} from 'react';
import {View, FlatList, Text} from 'react-native';
import currencies from '../data/currencies';

import {ListItem, Separator} from '../components/List';
const temp_base_currency = 'CAD';

class CurrencyList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedItem: '',
    };
  }

  handlePress = (item) => {
    this.setState({
      selectedItem: item, //__
    });
    // const {navigate} = this.props.navigation;
    // navigate('Home', {clickedItem: this.state.selectedItem});

    //Tıklandığında beklesin

    this.props.navigation.navigate('Home', {selected: item}); //__
  };

  render() {
    return (
      <View>
        <FlatList
          renderItem={({item}) => (
            <ListItem
              onPress={() => this.handlePress(item)}
              text={item}
              selected={item === this.state.selectedItem} //__
            />
          )}
          data={currencies}
          keyExtractor={(item) => item}
          ItemSeparatorComponent={Separator}
        />
      </View>
    );
  }
}

export default CurrencyList;

标签： reactjsreact-nativereact-native-androidreact-navigation