Реагировать на функцию вызова и установить, когда go вернуться к предыдущему экрану

Question

Я новичок в мире React

У меня есть 2 экрана: Stock и Barcode. На складе я перехожу к экрану со штрих-кодом. Когда я сканирую штрих-код, я go возвращаюсь к предыдущему экрану, я хотел бы установить входной текст со штрих-кодом и вызвать функцию. В моем примере joinData ();

Проблема заключается в установке входного текста и вызове функции. Я пробовал примеры и ответы, но я не могу найти или не понимаю, как это сделать.

Я попытался что-то в componentDidUpdate (), но это не удалось. Invariant Violation: максимальная глубина обновления превышена

На складе. js

import React, {useState} from "react";
import { ScrollView, TouchableWithoutFeedback, Dimensions, StyleSheet, FlatList, View,     Alert, TouchableOpacity, TextInput } from 'react-native';

//galio
import { Block, Text, theme } from "galio-framework";

import { Button, Icon, Input } from "../components/";

export default class Stock extends React.Component {
constructor(props) {  
super(props);
this.myRef = React.createRef();
this.array = [];
this.state = {
  arrayHolder: [],
  Input_ITMREF: ''
};
}

// I tried this but it fails 
componentDidUpdate() {
if (this.props.navigation.getParam('itmref') != 'undefined') {
  this.setState({ Input_ITMREF: this.props.navigation.getParam('itmref')});
}
}

componentDidMount() {
  this.setState({ arrayHolder: [...this.array] }) // Rafraîchit la liste
}

joinData = () => {
    vxml = this.state.Input_ITMREF+" I do something";
}

Render() {

return (

  <Block flex>
    <Block row space="evenly">
      <Block center>
        <Input 
          placeholder='Code article'
          onChangeText={data => this.setState({ Input_ITMREF: data })}
          ref={this.myRef}
        />
      </Block>
    </Block>
    <Block center>
        <Button style={styles.button} onPress={() => this.props.navigation.navigate('Barcode')}>Barcode</Button>
        <Text style={{ margin: 10 }}>Post: {this.props.navigation.getParam('itmref')}</Text>
    </Block>
  </Block>
    );
  }
}

и штрих-код. js

import React, {} from 'react';
import { ScrollView, TouchableWithoutFeedback, Dimensions, StyleSheet, FlatList, View, Alert, TouchableOpacity, TextInput } from 'react-native';
import { BarCodeScanner } from 'expo-barcode-scanner';
import { Button } from "../components/";

export default class Barcode extends React.Component {
   static navigationOptions = {
     header: null //hide the header bar
   };

   handleBarCodeScanned = ({ type, data }) => {
    this.props.navigation.navigate("Stock", {
      itmref: data
    });
  };

  render() {
    return (
       <BarCodeScanner
            onBarCodeScanned={this.handleBarCodeScanned}
            style={styles.barcodeScanner}
          />
    );
  }
}

Answer 1

Вам необходимо использовать метод WillFocus (включен в реагирующую навигацию), когда вы возвращаетесь со страницы штрих-кода на stockPage

componentDidMount(){
    console.log("willFocus runs") initial start

    const {navigation} = this.props;
    navigation.addListener ('willFocus', async () =>{
      console.log("willFocus runs") // calling it here to make sure it is logged at every time screen is focused after initial start
    });
}

Для получения дополнительной информации прочитайте этот документ https://reactnavigation.org/docs/function-after-focusing-screen/

Answer 2

Вы можете передать функцию обработчика состояния в качестве реквизита на экран штрих-кода и использовать его для установки значения для textInput в состоянии. на складе (в состоянии)

state = {
   inputValue: ''
}
....
const setInputTextValue= (newValue) => {
   this.setState({
   inputValue: newValue
})

вы передаете эту функцию в качестве реквизита в сцену со штрих-кодом и вызываете ее всякий раз, когда хотите установить новое значение (учитывая, что сцена на складе еще смонтирована).

ОБНОВЛЕНИЕ : Как правильно обновить предыдущий экран StackNavigator?

еще одно решение, которое я только что видел: Обновление состояния другого экрана в быстрой навигации