无法在 React Native 中附加值

Question

我在 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
      onError={this.onError} // Callback when video cannot be loaded
      style={styles.nodePlayerView}
      fullscreen={false}
      resizeMode="cover"
      paused={paused}
    />
  );
};


//...

我遇到的问题是由于某种原因无法将“_streamkey”的值附加到字符串。在 'renderCamerView' 函数中，我试图设置 'outputUrl' 的值但没有成功。按下按钮时调用此函数。我已经为此苦苦挣扎了很长一段时间。从我目前编写的代码 post 中可以看出，我收到“JSX 值应该是表达式或引用的 JSX 文本”。错误。但是，如果我尝试类似的操作：

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

这会引发“意外标记”错误，似乎表明“+”是错误的语法。非常感谢有关如何解决此问题的任何建议，如前所述，这让我发疯。提前谢谢你。

Answer 1

我认为你必须稍微调整一下语法才能在你的 React 组件中进行字符串连接：

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

或使用字符串插值：

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

有帮助吗？

Answer 2

我们可以直接使用 value 而不是使用 _streamkey 来连接 _streamurl。您不能在设置它的同一渲染周期中使用 _streamkey 的值，因为 setState 是异步的。如果我们在您设置后立即在 getKey 中记录 this.state._streamkey，您将不会获得新设置的值。

您可以在官方 react-native 文档中找到它。

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.

试试下面的方法。

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

您对状态的访问属性 _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
    />
}

无法在 React Native 中附加值

Trouble appending value in React Native

string

variables

append

react-native