Trouble appending value in React Native-CodePudding

I have some code in React Native as follows, as can be seen I am calling a routine within the "componentDidMount" that is intended to load some previously saved variables from 'storage':

export default class Cast extends Component {
state = {
  admin: false,
  isPublishing: false,
  userComment: "",
  hasPermission: false,
  paused: true,
  _email: false,
  _name: false,
  _pword: false,
  _play_ID: false,
  _streamkey: false,
  _playurl: "",
  _streamurl: "",
  };


getKey = async() => {
  try {
    var value = await AsyncStorage.getItem('email');
    this.setState({ _email: value });
    value = await AsyncStorage.getItem('playkey');
    this.setState({ _play_ID: value });
    const playurl = "https://stream.mux.com/"   value   ".m3u8"
    this.setState({ _playurl: playurl });
    value = await AsyncStorage.getItem('castkey');
    this.setState({ _streamkey: value });
    const streamurl = "rtmp://global-live.mux.com:5222/app/"   value
    this.setState({ _streamurl: streamurl });
  } catch (error) {
    console.log("Error retrieving data"   error);
  }
}

componentDidMount(){
  this.getKey();
}

renderCameraView = () => {

  return (
    <NodeCameraView
      style={styles.nodeCameraView}
      /* eslint-disable */
      ref={vb => {
        this.vb = vb;
      }}
      /* eslint-enable */
      outputUrl = {this.state._streamurl}
      camera={settings.camera}
      audio={settings.audio}
      video={settings.video}
      autopreview
    />
  );
};

renderPlayerView = () => {

const { paused } = this.state;
const source = {
  uri: _playurl  //SEEMS TO ACCEPT THIS VARIABLE WITHOUT CURLY BRACKETS OR 'THIS.STATE.'...NOT SURE WHY...? 
};
  return (
    <Video
      source={source} // Can be a URL or a local file.
      /* eslint-disable */
      ref={ref => {
        this.player = ref;
      }} // Store reference
      /* eslint-enable */
      onBuffer={this.onBuffer} // Callback when remote video is buffering
      one rror={this.onError} // Callback when video cannot be loaded
      style={styles.nodePlayerView}
      fullscreen={false}
      resizeMode="cover"
      paused={paused}
    />
  );
};


//...

The issue I am having is for some reason it is impossible to append the value of '_streamkey' to a string. Within the 'renderCamerView' function I am attempting to set the value of 'outputUrl' without success. This function is called upon a button press. I have been struggling with this for quite some time. As can be seen in my code post as currently written I am receiving a "JSX value should be either an expression or a quoted JSX text." error. However if I try something like:

outputUrl="rtmp://global-live.mux.com:5222/app/"   this.state._streamkey

That throws an "unexpected token" error that seems to indicate the " " is bad syntax. Any suggestions on how to solve this are GREATLY appreciated, as mentioned this has been driving me crazy. Thank you in advance.

CodePudding user response：

Instead of using _streamkey for concatenating _streamurl we could use value directly. You cannot use the value of _streamkey in the same render cycle in which you set it since setState is asyncronous. If we log this.state._streamkey in getKey right after you have set it, you won't get the newly set value.

You can find this in the official react-native documentation.

setState() enqueues changes to the component state and tells React that this component and its children need to be re-rendered with the updated state. This is the primary method you use to update the user interface in response to event handlers and server responses.

setState() does not always immediately update the component. It may batch or defer the update until later. This makes reading this.state right after calling setState() a potential pitfall.

Try the following.

getKey = async() => {
  try {
    var value = await AsyncStorage.getItem('email');
    this.setState({ _email: value });
    value = await AsyncStorage.getItem('castkey');
    this.setState({ _streamkey: value });
    const streamurl = "rtmp://global-live.mux.com:5222/app/"   value
    this.setState({ _streamurl: streamurl });
  } catch (error) {
    console.log("Error retrieving data"   error);
  }
}

Your access to the state property _streamurl is incorrect and you need to use curly brackets when you pass a component prop. Try the following code.

render() {
    return <NodeCameraView
      style={styles.nodeCameraView}
      /* eslint-disable */
      ref={vb => {
        this.vb = vb;
      }}
      /* eslint-enable */
      outputUrl={this.state._streamurl}  
      camera={settings.camera}
      audio={settings.audio}
      video={settings.video}
      autopreview
    />
}

CodePudding user response：

I think you have to tweak your syntax a bit to do string concatenation in your react component:

outputUrl={"rtmp://global-live.mux.com:5222/app/"   this.state._streamkey}

or use string interpolation:

outputUrl={`rtmp://global-live.mux.com:5222/app/${this.state._streamkey}`}

Does that help?