Question

根据this question on forcing a component to update的建议，我编写了以下代码以在套接字连接收到广播时更新组件。

constructor(props) {
    super(props)
    this.state = { key: 0 };
}   

componentWillMount(){
    const socket = io()

    socket.on('data', function(data) {

        // Do stuff with the data

        this.setState({ key: Math.random() })
    })
}

但是我得到了错误

未捕获的TypeError：this.setState不是函数

我了解这是因为this在socket.on()函数内部时指的是不同的东西，但我不知道如何解决。

我也尝试过

constructor(props) {
    super(props)
    this.state = { key: 0 };
    this.update = this.update.bind(this);
}

componentWillMount(){
    const socket = io()

    socket.on('data', function(data) {

        // Do stuff with the data

        update()
    })
}

update(){
    this.setState({ key: Math.random() })
}

但是我得到了错误

未捕获的ReferenceError：未定义更新

有人能更好地更新我的组件或修复当前的实现吗？

Answer 1

除非您将其作为箭头函数使用，否则请释放this的上下文：

socket.on('data', (data) => {

同样，当您使用类组件时，也不需要执行setState技巧即可this.forceUpdate()。

如何在socket.io事件上更新React组件

1 个答案: