javascript - 从回调函数返回不设置文本

Question

我想知道用户是在线还是离线。因此，我从我的类中导出了一个名为 isOnline 的函数。

以下是我定义 isOnline 函数的方式:

export const isOnline = (callback) => {
    NetInfo.isConnected.fetch()
           .then(result => {
                callback(null, result);
           }).catch(err => {
                callback(err);
           });
};

isOnline 函数返回一个 bool 值。

现在，我想在组件中使用它。因此，我尝试按如下方式使用它:

render() {
    return (
        <Text>{
            isOnline((err, result) => {
                console.log(err);
                console.log(result);
                return result ? 'Online' : 'Offline';
            })
        }</Text>
    );
}

我还记录了错误和结果对象。它们的值是:

err: null
result: false

我希望在屏幕上看到“在线”或“离线”。但我没有看到任何文字。我知道我的返回声明中有问题。但我不知道是什么。有人可以帮助我吗？

Answer 1

您最好将 Online/Offline 字符串放入状态中，然后使用 componentDidMount 更新它

例如:

class MyComponent extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            text: ''
        }
    }

    componentDidMount() {
        isOnline((err, result) => {
            this.setState({
                text: result ? 'Online' : 'Offline'      
            });
        })
    }

    render() {
        return (
            <Text>{
                this.state.text
            }</Text>
        );
    }

}