在反应中传递事件处理程序时出现空引用异常

Question

我想在使用 websocket 键入文本时发送消息。

但在键入文本时出现 websocket 引用错误。

我认为 ShareTextComponent onInputEvent 函数参数未在其他位置执行。

所以 websocket 属性无法在该字段中引用

但我不知道该如何解决。

而且我没有使用任何状态管理库，例如 redux 和 mobx。

纯reactjs

[错误]

[代码]

const ShareTextComponentView = (props) => {

const [isShareMode, setShareMode] = useState(false)
const [syncText, setSyncText] = useState("")
const [isOpen, setOpen] = useState(false)
const [name, setName] = useState("")

let ws = null;
const connect = () => {
    ws = new WebSocket(ADDRESS + `/${name}`)

    //액세스코드들을 전부 보냄
    ws.onopen = () => {
        ws.send(JSON.stringify({command: "CONNECT", accessCode: generateAccessCode()}))
        console.log(`${ADDRESS}에 접속 되었습니다.`)
        setOpen(true)
    }

    ws.onclose = () => {
        ws.send(JSON.stringify({command: "CLOSE"}))
        console.log(`${ADDRESS}에 접속 종료 되었습니다.`)
        setOpen(false)
    }

    ws.onmessage = (evt) => {
        if (isShareMode) {
            return
        }

        const message = JSON.parse(evt.data)
        console.log({message: message})
        setSyncText(message.data)
    }
    ws.onerror = (err) => {
        console.log("접속중에 에러가 발생되었습니다.")
        console.log(err)
    }
}

const close = () => {
    if (ws !== null && ws.readyState !== WebSocket.CLOSED) {
        ws.close()
    }
}

// p2p로 웹소켓으로 연결
useEffect(() => {
    if (isOpen) {
        return
    }

    connect()
    setOpen(true)

    return () => {
        //만약 공유모드를 종료했을때 websocket에 shutdown 메세지를 보냄
        if (isOpen) {
            close()
            console.log(`${ADDRESS}에 접속 종료 되었습니다.`)
        }
        setOpen(false)
    }

}, [isShareMode])

const onTextInput = (text) => {
    const {name, value} = text.target

    if (!isShareMode) {
        return
    }

    console.log("websocket status")
    console.log(ws)
    console.log("input value")
    console.log(value)
    if (ws.readyState === WebSocket.CLOSED) {
        console.log("Connect Close 되었습니다.")
    } else {
        ws.send(JSON.stringify({command: "SEND", message: value}))
    }
}

const generateAccessCode = () => {
    return "hello"
}


const reconnect = () => {
    connect()
    console.log(ws)
}
return (
    <div className="container">
        <h1> Please Enter This Area Section</h1>
        <h1> {isOpen ? "Connect" : "Disconnect"}</h1>
        <div className="name-container">
            <label> Name : </label>
            <input type="text" onChange={(e) => {
                setName(e.target.value)
            }}/>
        </div>
        <button className="reconnect-mode" onClick={reconnect}>Connect</button>
        <button className="is-receiever" onClick={() => setShareMode(!isShareMode)}>공유자 입니까?</button>
        <h1>{isShareMode ? "공유모드" : "수신모드"}</h1>
        <ShareTextComponent accessCode={generateAccessCode()} onInputEvent={onTextInput} syncText={syncText}/>
    </div>
)
}
export default ShareTextComponentView;

[登录onTextInput后]

Answer 1

在函数顶部添加空检查 ->

const onTextInput = (text) => {
    if (!ws) return;

这至少会帮助您克服该错误并缩小流程的其余部分。

在反应中传递事件处理程序时出现空引用异常

null reference exception while passing event handler in react

javascript

websocket

reactjs