React-redux状态更新但组件不重新呈现

Question

关于这个主题有数百个问题，但对我没什么用。

正如您在上图中所看到的那样，状态显然是由this.props.getSubcontractors();更新的 containers / SubcontractorListPage.js componentWillMount()函数。但是viewComponent SubcontractorList.js不会在Props更改时重新渲染。有一个空白页面。

容器/ SubcontractorListPage.js

import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import SubcontractorList from 
'../components/viewComponents/SubcontractorList/SubcontractorList';
import * as SubcontractorActions from '../actions/subcontractor';

class SubcontractorListPage extends Component {
  static propTypes = {
    getSubcontractors: PropTypes.func.isRequired,
    subcontractor: PropTypes.object.isRequired,
  };

  componentWillMount() {
    console.log(this.props);
    this.props.getSubcontractors();
  }

  render() {
    return (
      <SubcontractorList subcontractors=
      {this.props.subcontractor.subcontractors} />
    );
  }
}

export default connect(
  state => ({ subcontractor: state.subcontractor }),
  dispatch => bindActionCreators(SubcontractorActions, dispatch)
)(SubcontractorListPage);

组件/ viewComponents / SubcontractorList / SubcontractorList.js

import PropTypes from 'prop-types';
import React, { Component } from 'react';

import styles from './SubcontractorList.scss';

class SubcontractorList extends Component {
  static propTypes = {
    subcontractors: PropTypes.array.isRequired,
  };

  render() {
    const subcontractors = this.props.subcontractors;

    let display = <div />;
    console.log(subcontractors);

    display = (
      <div className={styles.Breadcrumb}>
        {subcontractors.map((item) =>
          <div className={styles.Item} key={item.Id}>
            {item.Name}lol</div>
        )}
      </div>
    );

    return display;
  }
}

export default SubcontractorList;

动作/ subcontractor.js

export const SUBCONTRACTORS_GET = 'SUBCONTRACTORS_GET';
export const SUBCONTRACTOR_GET = 'SUBCONTRACTOR_GET';
export const SUBCONTRACTOR_ADD = 'SUBCONTRACTOR_ADD';
export const SUBCONTRACTOR_EDIT = 'SUBCONTRACTOR_EDIT';
export const SUBCONTRACTOR_DELETE = 'SUBCONTRACTOR_DELETE';

export function getSubcontractors() {
  return {
    type: SUBCONTRACTORS_GET
  };
}

export function getSubcontractor() {
  return {
    type: SUBCONTRACTOR_GET
  };
}

减速器/ subcontractor.js

import { SUBCONTRACTORS_GET, SUBCONTRACTOR_GET } from         
'../actions/subcontractor';

import getTable from '../utils/dbHelper/getTable';

const initialState = {
  subcontractors: [],
  subcontractor: {}
};

export type subcontractorStateType = {
  subcontractors: [],
  subcontractor: {}
};

type actionType = {
  type: string
};

export default function subcontractor(state: {} = initialState, 
action: actionType) {
  switch (action.type) {
    case SUBCONTRACTORS_GET:
      return {
        ...state,
        subcontractors: getTable('SUBCONTRACTOR')
      };
    case SUBCONTRACTOR_GET:
      console.log('SUBCONTRACTORS_GET');
      break;
    default:
      return state;
  }
}

如何解决此问题？

更新

const sqlite3 = require('sqlite3').verbose();

const dbSrc = '../testdb';

export default function getTable(tablename) {
  const db = new sqlite3.Database(dbSrc);
  const queries = [];
  db.each(`SELECT * FROM ${tablename}`, (err, row) => {
    queries.push(row);
    console.log(row);
  });

  db.close();
  return queries;
}