JavaScript 数组的属性未定义，而数组可读（iOS）

Question

目前正在使用 react-native-sqlite-storage 开发 React Native (iOS)。 getUserData 函数由组件（ProfileView）调用，然后它只是记录它。 如果我尝试记录返回的数组，它可以工作，但如果我尝试记录同一个数组的零元素，它会说它是未定义的。 我省略了 okCallback 和 errorCallback，因为它们只是 console.log 发送给它们的消息。 我也尝试在 getUserData 中使用对象而不是数组，但它只会返回 undefined。

数据库工作者：

export function getUserData() {
    var arr = [];
    db.executeSql('SELECT * from userData;', [], results => {
        let len = results.rows.length;
        for(let i = 0; i < len; i++) {
            arr.push(results.rows.item(i));
        }
    });
    return arr;
}

class ProfileView extends React.Component {
    constructor(props) {
        super(props);
        var test = getUserData();
        console.log('not working', test[0])
        console.log('working', test)

    }

个人资料视图：

class ProfileView extends React.Component {
constructor(props) {
    super(props);
    var test = getUserData();
    console.log('not working', test[0])
    console.log('working', test)

}

render() {
    return (...);
}
}

提前致谢

Answer 1

正如@Thomas 所说，这是时间问题。

您的数据库调用是异步的。您创建一个空数组。然后你向db.executeSql 提供一个回调函数。每当数据库返回数据时，就会调用该回调函数，并将元素添加到数组中。

但是，当这种情况发生时，您的事件循环会继续进行。在您的情况下，您将返回（空）数组并执行您的console.logs。

为了使这项工作可靠，您必须在组件中有一种机制来监视数据库调用是否完成，以及何时使用数据。通常这就是反应组件状态的用途。

所以我们创建了一个状态，然后我们将一个回调传递给我们的getUserData。当数据库调用完成时，它会更新我们的状态，并且组件会重新渲染。

export function getUserData(cb) {
  var arr = [];
  db.executeSql('SELECT * from userData;', [], results => {
    let len = results.rows.length;
    for (let i = 0; i < len; i++) {
      arr.push(results.rows.item(i));
    }
    if (cb) cb(arr);
  });
  return arr;
}

个人资料视图：

class ProfileView extends React.Component {
  constructor(props) {
    super(props);
    this.state = { test: [] };
    var test = getUserData(x => this.setState({ test: x }));
  }

  render() {
    if(this.state.test.length) console.log('not working', this.state.test[0]);
    console.log('working', this.state.test);
    return (...);
  }
}