尽管使用了 setState()，但 React 组件在状态更改后不会重新渲染答案

【问题标题】：React component not rerendering after state change despite using setState()尽管使用了 setState()，但 React 组件在状态更改后不会重新渲染
【发布时间】：2021-03-27 02:39:08
【问题描述】：

我尝试从嵌入式 sqlite 数据库中获取数据并以列表格式显示。 fetchData() 函数正在工作，并返回正确的结果。但是，当我使用 setState() 更新状态时，react 没有重新渲染。接下来，我尝试在 componentDidMount() 中使用数组 ['a','b','c'] 设置状态（）。 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;

【问题讨论】：

谢谢！这解决了我的问题。

标签： javascript reactjs typescript electron

【解决方案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更好。

【讨论】：