在ReactNative中附加值時遇到問題

我在 React Native 中有一些代碼如下，可以看出我正在“componentDidMount”中呼叫一個例程，該例程旨在從“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}
    />
  );
};


//...

我遇到的問題是由于某種原因無法將“_streamkey”的值附加到字串中。在“renderCamerView”函式中，我試圖設定“outputUrl”的值但沒有成功。此函式在按鈕按下時呼叫。我已經為此苦苦掙扎了一段時間。從我目前撰寫的代碼帖子中可以看出，我收到“JSX 值應該是運算式或參考的 JSX 文本”。錯誤。但是，如果我嘗試類似：

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

這會引發“意外標記”錯誤，似乎表明“ ”是錯誤的語法。任何關于如何解決這個問題的建議都非常感謝，正如前面提到的，這讓我發瘋了。先感謝您。

uj5u.com熱心網友回復：

我們可以直接使用而不是使用_streamkey連接。您不能在設定它的同一渲染周期中使用 的值，因為它是異步的。如果我們在您設定后立即登錄，您將無法獲得新設定的值。_streamurlvalue_streamkeysetStatethis.state._streamkeygetKey

你可以在官方的 react-native 檔案中找到它。

setState() 將組件狀態的更改加入佇列，并告訴 React 該組件及其子組件需要使用更新的狀態重新渲染。這是您用來更新用戶界面以回應事件處理程式和服務器回應的主要方法。

setState() 并不總是立即更新組件。它可能會批量更新或將更新推遲到以后。這使得在呼叫 setState() 之后立即讀取 this.state 是一個潛在的陷阱。

試試下面的。

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);
  }
}

您對 state 屬性的訪問_streamurl不正確，您需要在傳遞組件 prop 時使用大括號。試試下面的代碼。

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
    />
}

uj5u.com熱心網友回復：

我認為您必須稍微調整語法才能在反應組件中進行字串連接：

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

或使用字串插值：

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

這有幫助嗎？

標籤：细绳 反应式 变量 附加

上一篇：Python：如何在回圈中讀取變數檔案名

下一篇：如何從PHP中的字串獲取陣列值到變數？