React Native Display Rendering

Question

我更新了代码以反映Denis的解决方案。但是，react现在不再响应从节点服务器发送的命令

export default class Display extends Component {
  constructor(props){
      super(props);
      this.state = {
        ren: "",
        action: "background",
        media: "white",
        backgroundColor: 'white',
        uri: "https://www.tomswallpapers.com/pic/201503/720x1280/tomswallpapers.com-17932.jpg"
      };
  }

  componentDidMount(){ 
    this.startSocketIO();
  }
  componentWillUnmount(){
    socket.off(Socket.EVENT_CONNECT);
  }

  startSocketIO(){
    socket.on('function_received', func_var => {
        let command = func_var.split(" ");
        this.setState({action: command[0]});
        this.setState({media: command[1]});
        console.log(this.state.action);
        console.log(this.state.media);
        switch(this.state.action){
          case 'image':
            this.setState({ uri: this.state.media});
            console.log(this.state.uri);
          case 'background':
            this.setState({ backgroundColor: this.state.media});
            console.log(this.state.backgroundColor);
          default:
            console.log(this.state.backgroundColor);
            // return (<View style={{backgroundColor: this.state.backgroundColor, flex: 1}} />);
        }
      });
  }
  render(){
      return (
        null
      );
  }

}

我目前正在开发一个基本的反应本机应用程序，它显示从节点服务器以uri格式接收的图像并更改背景颜色。另外，我的两个实现都有效。 （请参阅BackGround和ImageServer组件）我现在正尝试将两个组件的功能组合到一个名为display的组件中。到目前为止，我的当前代码看起来应该没有问题，但是在通过socket.io向设备发送命令之后，由于我的控制台日志在测试后停止填充，因此渲染不会再进一步​​了。我不确定switch语句的设置是否存在问题，或者我是否以某种方式导致竞争条件。任何见解将不胜感激！

import React, { Component } from 'react';
import {Image, Text, StyleSheet, Button, View, Dimensions, Vibration} from 'react-native';

const io = require('socket.io-client');
//change this to your public ip "google what is my ip address"
//This will be modified in the future to grab the ip address being used by
//the node server
let server = 'redacted';
let socket = io(server, {
  transports: ['websocket']
});

export default class Display extends Component {
  constructor(props){
      super(props);
      this.state = {
        action: "background",
        media: "white",
        backgroundColor: 'white',
        uri: "https://www.tomswallpapers.com/pic/201503/720x1280/tomswallpapers.com-17932.jpg"
      };
  }
  render(){
      socket.on('function_received', func_var => {
        var command = func_var.split(" ");
        this.setState({action: command[0]});
        this.setState({media: command[1]});
      });
      console.log(this.state.action);
      console.log(this.state.media);
      switch(this.state.action){
        case 'image':
          this.setState({ uri: this.state.media});
          return (
            <Image 
              source={{uri: this.state.uri}} 
              style={styles.fullscreen} />
            );
        case 'background':
          this.setState({ backgroundColor: this.state.media});
          return (<View style={{backgroundColor: this.state.backgroundColor, flex: 1}} />);
        default:
          return (<View style={{backgroundColor: this.state.backgroundColor, flex: 1}} />);
      }
  }
}


export class BackGround extends Component {
  constructor(props){
        super(props);
        this.state = {
        backgroundColor: 'black'
      }; 
  }
    render(){
        socket.on('function_received', func_var => {
        this.setState({ backgroundColor: func_var});
        });
        return (
            <View style={{backgroundColor: this.state.backgroundColor, flex: 1}} />
        );
    }
}
export class ImageServer extends Component {
    constructor(props){
        super(props);
        this.state = {
        uri: "https://www.tomswallpapers.com/pic/201503/720x1280/tomswallpapers.com-17932.jpg"
        };
  }
    render() {
    socket.on('function_received', func_var => {
      //Vibration.vibrate([0, 500, 200, 500,200,500,200,500,200,500,200,500,200], false);
      this.setState({ uri: func_var});
    });
    return(
        <Image 
        source={{uri: this.state.uri}} 
        style={styles.fullscreen}
      />
    );
    }
}

Answer 1

您的代码应该是这样的

componentDidMount() {
  this.startSocketIO();
}

startSocketIO() {
  socket.on('some_method', (response) => {
    this.setState({ key: response.some_value })
  });
}

componentWillUnmount() {
  // unsubscribe socket.io here !important
}

render() {
  return (
    // JSX
  );
}