reactjs - React Native 复用设置状态的函数

Question

我是 React Native 新手。在我的应用程序中，在 3 个不同的文件中使用了相同的函数来检查数据库中是否存在用户。

checkUserExists = (userId) => {
        var that = this;
        database.ref('users').child(userId).once('value').then(function(result){
        const exists = (result.val() !== null);

        if (exists) {
            var data = result.val();
            that.setState({
                username: data.username,
                name: data.name
            })
        }
    })
}

为了减少代码量，我想把这个函数放到一个组件中，以便可以重用。所以我用这个函数创建了一个新文件:

export function checkUserExists (userId) {
    database.ref('users').child(userId).once('value').then(function(result){
        const exists = (result.val() !== null);

        if (exists) {
            var data = result.val();
            setState({
                username: data.username,
                name: data.name
            })
        }
    })
}

但这会遇到[未处理的 promise 拒绝:ReferenceError:找不到变量:setState]

处理这个问题的正确方法是什么？我必须使用 Redux 吗？到目前为止我还找不到明确的答案。

更新:我也尝试过

export default class Authentication extends Component {
    checkUserExists = (userId) => {
        database.ref('users').child(userId).once('value').then(function(result){
            const exists = (result.val() !== null);

            if (exists) {
                var data = result.val();
                setState({
                    username: data.username,
                    name: data.name
                })
            }
        })
    }
}

我试着这样调用它

Authentication.checkUserExists(user.id);

但得到:TypeError:_authentication.default.checkUserExists不是函数

Answer 1

您可以做两件事来使其发挥作用

1. 将 .then 函数更改为箭头函数或绑定(bind)它
2. 调用 checkUserExists 函数，并在类上下文中执行该函数

 export function checkUserExists (userId) {
        database.ref('users').child(userId).once('value').then((result) => {
            const exists = (result.val() !== null);

            if (exists) {
                var data = result.val();
                this.setState({
                    username: data.username,
                    name: data.name
                })
            }
        })
    }

现在你想使用 checkUserExists 的地方，你可以将它与 .call 一起使用

checkUserExists.call(this, userId);

此解决方案的一个缺点是，可能很难调试您的应用程序，因为状态是从组件外部的代码设置的

为了克服这个缺点，你可以定义你的方法，例如

export async function checkUserExists (userId) {
      try {
        const result = await database.ref('users').child(userId).once('value');
        const exists = (result.val() !== null);
        if (exists) {
            return data;
        }
        return false;
      } catch(e) {
         console.log(e);

      }
  }

并在组件中使用它，就像

someFunc = async () => {
   const data = await checkUserExists(userId);
   if (data) {
        this.setState({
            username: data.username,
            name: data.name
        })
   }
}