代码之家 › 专栏 › 技术社区 › DÅ¾enis H.

仅在刷新页面后呈现道具

redux-thunk react-redux redux reactjs javascript

DÅ¾enis H. · 技术社区 · 8 年前

我有100个+ <td> 渲染。我使用NodeJS后端获取它,将数据传递到前端,并使用Redux来响应组件。我有许多组件可以呈现更少的数据,而且一切都很好,但对于这个组件,在刷新页面之前什么都不会发生。

我尝试使用不同的生命周期(cpmponentWillMount、willreceiveprops等),但似乎什么都不起作用。

我也在使用React-thunk和React-router

在第一次刷新之后,就不再需要这样了。所以基本上,它只在我第一次启动dev服务器时发生。

我坚信我必须使用组件生命周期功能之一,并且我尝试了错误的功能或顺序错误?

报告数据 ===>渲染发生的位置

class ReportsData extends Component {
constructor(props) {
    super(props);
    this.state = {
        allReports: []
}}

getReportsData = () => {
    return reportsApi.getReports().then(report => {
        this.setState(() => ({
            allReports: Object.assign([], report.data)
        })
    )});
}

componentWillMount() {
    this.getReportsData(this.props);
}

render() {

// const { reports } = this.props;

const { allReports } = this.state; 

let sortedReports = _.sortBy(reports, function(o) { return new moment(o.date) }).reverse();

const listReports = sortedReports.map(item => {
    return (

    <tr key={item.rowNumber}>
        <td> {item.year}</td>
        <td> {item.month}</td>
        <td> {item.bruto_ukupno}</td>
        <td> {item.neto_plata}</td>
        <td> {item.topli_obrok}</td>
        <td> {item.doprinosi}</td>
        <td> {parseInt(item.ukupno_plata, 10)}</td>

        <td className="table-actions">
            <Link to={{ pathname: '/reports/details', state: { item } }}>
                <PieChart size="21"/>
            </Link>
        </td>
    </tr>
)});

    return (

    <div className="portlet-body">
        <table className="table table-striped">
            <thead>
            <tr>
                <th>Year</th>
                <th>Month</th>
                <th>Gross</th>
                <th>Net</th>
                <th>Meals</th>
                <th>Taxes</th>
                <th>Salarys</th>
                <th>Details</th>
            </tr>
            </thead>
            <tbody>
                {listReports} 
            </tbody>
        </table>
    </div>
    );
}

}

报告SAPI

    import axios from 'axios';
    import {baseApiUrl} from '../config/config';

    const reportsApiUrl = baseApiUrl + 'reports/'

    class ReportsApi {

        static getReports() {
            return axios({
                method: 'get',
                url: reportsApiUrl + 'getReports'
            })
        }
    }

export default ReportsApi;

报告操作

    import * as actionTypes from '../actionTypes/actionTypes';
    import ReportsApi from "../api/reportsApi";

    export const getReports = (data) => {
        return {
            type: actionTypes.GET_REPORTS,
            data
        }
    }

export const getReportsAsync = () => {
    return dispatch => {
        return ReportsApi.getReports()
        .then(reports => {
            dispatch(getReports(reports.data));
        }).catch(error => {
            console.log('error while loading reports', error);
            throw(error);
        });
    };
}

这种情况仅在我第一次启动DEV服务器时发生 所以,当我提起应用程序时,我的应用程序的每个其他组件都会收到它的道具,除了这个,我在所有地方都使用相同的逻辑。唯一的区别在于渲染的数据量。如果我退出并重新登录,一切都很好。如果我刷新、返回和转发,一切都很好,但是一旦我停止服务器,再次启动它,只有这个组件有这个问题。

3 回复 | 直到 5 年前

AJ Genung 8 年前

您将在何处导入和使用此组件。如果第一次呈现此组件时,您传递的ReportData数据可能不存在。抛出控制台。在componentDidMount()生命周期方法中记录(this.props),以查看这到底是什么。道具是组件第一次渲染

Seircn 8 年前

尝试didMount和WillReceiveProps?

DÅ¾enis H. 8 年前

如果来自API的数据未定义,并且Redux必须等待所需的数据,则会进行不必要的检查。签出时,组件已在没有任何数据的情况下渲染。我重新整理了一下代码,现在开始工作了。谢谢你给我指出了正确的方向。

所以,问题出在reportsService模块的后端。

以下是供将来参考的修复程序:

    const _ = require('lodash');

    module.exports = {
        mapReportsSheetToJson(data) {
          let result = [];
          for (let i = 2; i < data.length; i++) {
            let elem = {};
            data[1].map((item, index) => {
              // if (typeof data[i][index] !== 'undefined') {
                elem[item.toLocaleLowerCase()] = data[i][index];
              // }
            })
            elem['rowNumber'] = i + 1;
            result.push(elem);
          }
          return result;
        }
      }