Kamera wird nicht angezeigt, Statusübergangsproblem, reaktionsbereit

Question

Ich habe versucht, ein asyncstorage-Objekt zu speichern, auf touchableopacity onPress, und navigiere dann zu einem reaktiven nativen Kamerabildschirm.

Problem ist: Kamera Bildschirm leer. Ich habe den folgenden Fehler erhalten: Warnung: Kann während eines bestehenden Zustandsübergangs nicht aktualisiert werden (z. B. in 'render' oder dem Konstruktor einer anderen Komponente). Render-Methoden sollten eine reine Funktion von Requisiten und Zustand sein; Konstruktornebeneffekte sind Anti-Pattern, können aber in 'componentWillMount' verschoben werden.

Warnpunkte auf Linien 27, 36 und 41 (bei AddParameters Klasse)

Hier ist der Code:

AddParameters.js

import React, { Component } from 'react'; 

import { 
    Text, 
    AsyncStorage, 
    View, 
    TouchableOpacity, 
} from 'react-native'; 

class AddParameters extends Component { 
    constructor() { 
    super() 
    this.state = { 
     localIds: [ 
     "data1", 
     "data2", 
     "data3", 
     "data4", 
     "data5", 
     "data6" 
     ], 
    } 
    } 

    renderScreen =() => { 
     return (
      <TouchableOpacity onPress={this._AddParameter(this.state.localIds[0])}> 
       <Text>Click Me</Text> 
      </TouchableOpacity> 
    ); 
    } 

    _AddParameter = (ParameterId) => { 
    const { navigate } = this.props.navigation; 
    AsyncStorage.setItem("myparam", ParameterId); 
    navigate("CameraScreen"); 
    } 

    render() { 
    return (
     this.renderScreen() 
    ); 
    } 
} 



export default AddParameters; 

CameraScreen.js

'use strict'; 
import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    Dimensions, 
    StyleSheet, 
    Text, 
    View, 
    Image, 
    AsyncStorage, 
} from 'react-native'; 
import Camera from 'react-native-camera'; 

class CameraScreen extends Component { 

    constructor(props) { 
    super(props); 
    this.state = { 
     mystate: '', 
    }; 
    } 

    renderCamera =() => { 
    return (
     <Camera 
     ref={(cam) => { 
      this.camera = cam; 
     }} 
     style={stylesCamera.container} 
     aspect={Camera.constants.Aspect.fill}> 
     </Camera> 
    ); 
    } 

    render() { 
    return (
     this.renderCamera() 
    ); 
    } 
} 

const stylesCamera = StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: "center", 
    alignItems: "center", 
    backgroundColor: "transparent", 
    }, 
}); 

export default CameraScreen; 

Jede Erklärung wäre hilfreich. Danke im Voraus.

Answer 1

Auf Ihrem AddParameters Datei versuchen, dies zu ändern:

<TouchableOpacity onPress={this._AddParameter(this.state.localIds[0])}> 

An:

<TouchableOpacity onPress={() => this._AddParameter(this.state.localIds[0])}>