反应原生 TypeError 试图分配给只读属性

Question

您好，我是新手，我尝试在 react native 中使用 socketio 发送套接字，但我收到错误：typeerror 试图分配给 ConnectScreen.js 中的只读属性它没有说明哪一行，请知道我做错了什么?

在 web 博览会中它说：无法添加属性更新程序，对象不可扩展 在移动设备上的博览会上说：试图分配给 ConnectScreen.js 中的只读属性（由 SceneView 创建）

import React from 'react';
import {View, Text, StyleSheet, Button, TextInput, TouchableHighlight} from 'react-native';
import socketIO from 'socket.io-client';
import io from 'socket.io-client';

export default class ConnectScreen extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            ip: "localhost", //ip rpi 192.168.1.172
            connecting: false,
        }

        return(
            <View style={styles.container}>
                <Text style={styles.txt}>Connect to IP:</Text>
                <TextInput
                    style={{ height: 60, borderColor: 'gray', borderWidth: 1 }}
                />
                <TouchableHighlight style={styles.button} activeOpacity={0.6} underlayColor="#DDDDDD" onPress={this.connectWifi()}>
                    <Text style={styles.txt}> CONNECT </Text>
                </TouchableHighlight>
            </View>
        );

    }

    connectWifi(){
        let socketIO = io("http://"+this.state.ip+":8888", {transports:['websocket']});
        this.setState({connecting:true});
        console.log("connecting to http://"+this.state.ip+":8888 ...");

        socketIO.on('connection_successful', () =>{
            this.props.navigation.navigate('Main', {socketIO, ip:this.state.ip});
            this.setState({connecting:false});
        });

        //checking if connection with server was succesfull
        setTimeout(() =>{
            if(this.state.connecting){
                this.setState({connecting:false});
                socketIO.disconnect();
                console.log("connection failed");
            }
        },3500);
    }


}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        width: "50%",
        alignSelf:'center',
        
  },
    button:{
        alignSelf:'center',
        backgroundColor: "#89cff0",
        width: "100%",
        
    },
    txt:{
        alignSelf:'center',
        fontSize: 50,

    }
});

Answer 1

将构造函数中的return语句移到render方法中。

React 类组件应该有 render() 方法。当状态改变时，React 会调用你的 render() 方法。