Excel文件获取的数据未显示在React-Redux中

Question

我正在从Excel文件中获取数据并显示在我的React-Redux项目中。现在，我能够成功获取数据，但问题是获取的数据未显示在UI中。另外，我将检查是否已提取数据并将其存储在我的 mapStateToProps 方法中。

任何人都有任何建议，然后向我解释这段代码中我会犯什么错误。

这是我的减速器1，我的手风琴处于活动状态或非活动状态：

import * as actionTypes from '../actions/actions';

const initialState = {
    data: [
        {id: 1, status: 'active'},
        {id: 2, status: 'inactive'},
        {id: 3, status: 'inactive'},
        {id: 4, status: 'inactive'}
    ]
}
const reducer = (state = initialState, action) => {
    switch(action.type) {
        case actionTypes.ACTIVE_STATE:
            return {
                ...state,
                data: state.data.map((acdnobj) => {
                    const panel = document.querySelector(`.panel-${acdnobj.id}`);
                    return {
                        ...acdnobj,
                        acdnobj: acdnobj.id === parseInt(action.id) ? (
                            acdnobj.status = 'active',
                            panel.style.maxHeight = panel.scrollHeight + "px"
                        ) : ( 
                            acdnobj.status = 'inactive',
                            panel.style.maxHeight = '0px'
                        )
                    }
                })
            }
        default:
    }
    return state; 
}
export default reducer;

这是我的Reducer 2，在这里我可以实际更改状态值并读取excel文件数据：

import * as actionTypes from '../actions/actions';

const initialState = {
    tableData: [],
    productsData: []
}
const excelReducer = (state=initialState, action) => {
    switch(action.type) {
        case actionTypes.READ_EXCEL:
            return {
                ...state,
                tableData: action.payload.excel1,
                productsData: action.payload.excel2
            };
        default:   
    };
    return state;
}
export default excelReducer;

这是我的UI，我可以在其中分配操作和显示的数据，而数据将不会显示：

import React, { Component } from 'react';
import Accordion from './components/accordion';
import { connect } from 'react-redux';
import * as actionTypes from './store/actions/actions';
import * as XLSX from 'xlsx';
import { Table } from 'react-bootstrap';
class App extends Component {
  render() {

    var list = this.props.items;
    var listItems = this.props.products;
    
    return (
      <div>
        <input type="file" onChange={(e) => {
          const file = e.target.files[0];
          this.props.readExcel(file);
        }} />
        
        {list.length === 0 ? <div /> :  <--- This the place where I trying to display data
          list.map((d, index) => (
            <Accordion key={index}
              title = {
                <Table>
                  <tr key={d.ID}>
                    <td>{d.ID}</td>
                    <td>{d.Mail}</td>
                    <td>{d.Name}</td>
                    <td>{d.PhoneNo}</td>
                    <td>{d.City}</td>
                    <td>{d.Date}</td>
                    <td>{d.Time}</td>
                  </tr>
                </Table>
              }
              content = {
                <p>Hello, This is Muzamil</p>
              }
            />
          ))
        }
      </div>
    );
  }
}
const mapStateToProps = (state) => {
  return {
    items: state.excel.tableData,
    products: state.excel.productsData
  };
}
const mapDispatchToProps = (dispatch) => {
  
  return {
    readExcel: (file) => {

      var excel1 = [];
      var excel2 = [];

      const promise = new Promise((resolve, reject) => {
        const fileReader = new FileReader();
        fileReader.readAsArrayBuffer(file);
        fileReader.onload = (e) => {
          const bufferArray = e.target.result;
          const wb = {
            SheetNames: [],
            Sheets: {}
          };
          const ws1 = XLSX.read(bufferArray, {
            type: "buffer"
            }).Sheets.Sheet1;
          const ws2 = XLSX.read(bufferArray, {
            type: "buffer"
            }).Sheets.Sheet2;
      
          wb.SheetNames.push("Sheet1");
          wb.Sheets["Sheet1"] = ws1;
      
          wb.SheetNames.push("Sheet2");
          wb.Sheets["Sheet2"] = ws2;
      
          const data1 = XLSX.utils.sheet_to_json(ws1);
          const data2 = XLSX.utils.sheet_to_json(ws2);
          resolve([data1, data2]);
        }
        fileReader.onerror = (error) => {
          reject(error);
        };
      })
      promise.then((excelData) => {
        excel1.push(excelData[0]);
        excel2.push(excelData[1]);

        dispatch({
          type: actionTypes.READ_EXCEL,
          payload: {
              excel1,
              excel2
          }
        })
      });
    }
  };
}
export default connect(mapStateToProps, mapDispatchToProps)(App);

每个建议对我都有帮助

随时回答这个问题。