无法遍历React Native,Expo中来自SQLite调用的数据

时间:2019-05-17 02:06:19

标签: react-native expo

我目前正在用我的React Native调用SQLite本地数据库

render() {
    let weekdays = this.weekdaysShort.map((day) => {
        return (
            <div key={day} className="day">{day}</div>
        )
    });
    let blanks = [];
    for (let i = 0; i < this.firstDayOfMonth(); i++) {
        blanks.push(
            <div key={i * 80} className="emptySlot day">
                {""}
            </div>
        );
    }

    let daysInMonth = [];
    for (let d = 1; d < this.daysInMonth; d++) {
        let className = (d === this.currentDay() ? "day current-day" : "day");
        daysInMonth.push(
            <div key={d} className={className}>
                <span>{d}</span>
            </div>
        );
    }

    let trElements = [];
    var totalSlots = [...blanks, ...daysInMonth];
    let rows = [];
    let cells = [];
    totalSlots.forEach((row, i) => {
        if ((i % 7) !== 0) {
            cells.push(row);
        } else {
            let insertRow = cells.slice();
            rows.push(insertRow);
            cells = [];
            cells.push(row);
        }
        if (i === totalSlots.length - 1) {
            let insertRow = cells.slice();
            rows.push(insertRow);
        }
    });

    console.log("days: ", totalSlots);
    trElements = rows.map((d, i) => {
        return (
            <div key={i * 100} className="day">
                {d}
            </div>
        );
    });

    return (
        <div className="Month">
            <div className="week">
                {weekdays}
            </div>
            {trElements}
        </div>
    );
};

我要返回数据,并使其成为带有以下内容的JSON字符串:Expo app like so: db.transaction(tx => { tx.executeSql('select * from dr_report_templates', [], (_, { rows }) => { const templateData = JSON.stringify(rows); this.setState({ options: templateData, isLoading: false }, () => console.log(this.state)) }); }, error => { alert(error); }, () => console.log('Loaded template settings') );

数据显示如下:

JSON.stringify

尝试仅获取第一个数组元素的值,如下所示:

Object {
  "isLoading": false,
  "options": "{\"_array\":[{\"id\":30,\"name\":\"SFR General\",\"description\":\"SFR1\"},{\"id\":31,\"name\":\"SFR Extended\",\"description\":\"SFR2\"},{\"id\":7790,\"name\":\"test_new_template\",\"description\":\"test_new_template\"},{\"id\":7792,\"name\":\"apart_1\",\"description\":\"apart_1\"},{\"id\":7793,\"name\":\"SFR\",\"description\":\"Single Family\"},{\"id\":7798,\"name\":\"Condo\",\"description\":\"Condo \"},{\"id\":7799,\"name\":\"Duplex\",\"description\":\"Duplex\"},{\"id\":7800,\"name\":\"Triplex \",\"description\":\"3\"},{\"id\":7801,\"name\":\"Apartments\",\"description\":\"Apartment complex\"},{\"id\":7802,\"name\":\"Commercial retail store \",\"description\":\"Storefront \"},{\"id\":7803,\"name\":\"5-10 unit\",\"description\":\"5\"},{\"id\":7804,\"name\":\"Commercial Industrial \",\"description\":\"Industrial \"},{\"id\":7805,\"name\":\"Industrial Property\",\"description\":\"RE\"}],\"length\":13}",
  "selected": "",
}

不起作用。我这样做的方式显然做错了,但不知道是什么。有什么想法吗?

编辑:我还用JSON.Stringify运行了查询。这样返回的数据前面带有“ t”。我以前从没做过这件事,也无法遍历它,所以这就是为什么我做了一个JSON.stringify。

this.state.options[0]

2 个答案:

答案 0 :(得分:1)

this.setState({ options: templateData._array, isLoading: false });

或将您在executeSql的第3个参数中的解构方式更改为:

(_, { rows: { _array } }) => {
  const templateData = JSON.stringify(_array);
}

答案 1 :(得分:1)

为什么要用JSON.stringify()吸引它?您可以遍历数组或使用数组的键名访问它。

注意:JSON.stringify()不会将其转换为JSON。它将转换为JSON string

  

JSON.stringify()方法将JavaScript对象或值转换为   JSON字符串,如果替换器函数为,则可以选择替换值   指定或可选地仅包括指定的属性(如果有)   指定了替换数组。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

您实际上是在将数据库响应转换为字符串。

所以改变

const templateData = JSON.stringify(rows);

const templateData = rows;

并在需要的地方使用此数组。