javascript - 尽管使用setState()，但是状态更改后，React组件不会重新呈现

Question

我试图从嵌入式sqlite数据库中获取数据并以列表格式显示。 fetchData()函数正常工作，返回的结果正确。但是，当我使用setState()更新状态时，react并未重新呈现。
接下来，我尝试在componentDidMount()上使用数组['a'，'b'，'c']设置setState()。 React确实重新渲染并显示a，b，c。

import React from 'react';
import sqlite3 from 'sqlite3';


type MyProps = {  };
type MyState = { data: Array<string> };

class App extends React.Component<MyProps, MyState>{
  constructor(props) {
    super(props);
    this.state = { data: [] };
    
  }

  async fetchData(){
    var db = new sqlite3.Database({$DB_PATH});
    var res: string[] = [];
    await db.each('select * from table', [], (err, row) => { //selecting 10 rows from table
      if (err) {
        throw err;
      }
        res.push(row.name);
    });
    db.close();
    console.log(this.state.data) //array length = 0
    this.setState({data: res})
    console.log(this.state.data) //array length = 10
  }

   async componentDidMount() {
      await this.fetchData();   
  }

  render() {
  return (
     <div>
        <ul>
          {this.state.data.map(el => (
            <li>
              {el}
            </li>
          ))}
        </ul>
    </div>
  );
  }
}
export default App;

Answer 1

由于db.each不会返回Promise，因此您无法通过'await'语句获得结果。
请引用APIs，您需要这样做:

each(sql: string, params: any, callback?: (this: Statement, err: Error | null, row: any) => void, complete?: (err: Error | null, count: number) => void): this;

因此，您应该在 complete回调中访问结果，代码如下:

async fetchData() {
  const db = new sqlite3.Database({ $DB_PATH });
  const res: string[] = [];
  await db.each('select * from table', [], (err, row) => { // selecting 10 rows from table
    if (err) {
      throw err;
    }
    res.push(row.name);
  }, () => {
    console.log(this.state.data) // array length = 0
    this.setState({ data: res })
    console.log(this.state.data) // array length = 10
    db.close();
  });
}

希望对您有所帮助。

此外，您还可以尝试使用 Statement#all([param, ...], [callback])函数，它比 each更好。