Question

您好，我是新来响应本机的，我正在尝试在React Native中发送带有socketio的套接字，但我得到了错误：typeerror试图分配给ConnectScreen.js中的readonly属性，但它没有说明哪一行，任何想法我在做什么错了请？

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方法。

反应类组件应具有render（）方法。状态改变时，React会调用您的render（）方法。

反应本机TypeError尝试分配给readonly属性

1 个答案: