[英]Props only render after I refresh the page
I have 100+ <td>
to render.我有 100+
<td>
渲染。 I'm fetching it using NodeJS backend, passing the data to the frontend, and using Redux to React components.我使用 NodeJS 后端获取它,将数据传递到前端,并使用 Redux 来响应组件。 I have many components that render fewer data and everything works great, but when it comes to this component, nothing happens until I refresh the page.
我有很多组件渲染较少的数据并且一切正常,但是当涉及到这个组件时,在我刷新页面之前什么也没有发生。
I tried using different life cycles (cpmponentWillMount, willRecieveProps, etc), but nothing seems to work.我尝试使用不同的生命周期(cpmponentWillMount、willRecieveProps 等),但似乎没有任何效果。
I'm also using React-thunk and react-router我也在使用 React-thunk 和 react-router
After the first refresh, there is no need for that anymore.第一次刷新后,就不需要了。 So basically it only occurs when I first start the dev server.
所以基本上它只发生在我第一次启动开发服务器时。
I strongly believe that I have to use one of the component lifecycle functions and that I tried the wrong ones or in the wrong order?我坚信我必须使用组件生命周期函数之一并且我尝试了错误的函数或以错误的顺序?
ReportsData == > Where the rendering happens ReportsData == > 渲染发生的地方
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>
);
}
} }
ReportsAPI报告API
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;
reportsActions报告行动
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);
});
};
}
This happens only the first time I start the DEV server So when I lift app my app every other component receives it's props, except this one, and I'm using the same logic everywhere.The only difference is in the amount of data being rendered.这仅在我第一次启动 DEV 服务器时发生,所以当我提升应用程序时,我的应用程序每个其他组件都会收到它的道具,除了这个,我在任何地方都使用相同的逻辑。唯一的区别在于渲染的数据量. If I log out and log back in, everything is perfectly fine.
如果我注销并重新登录,一切都很好。 If I refresh, go back and forward, it's all good, but as soon as i stop the server, start it again, only this component has that issue.
如果我刷新,来回前进,一切都很好,但是一旦我停止服务器,再次启动它,只有这个组件有这个问题。
Where are you importing and using this component.你在哪里导入和使用这个组件。 If could be that the data you are passing ReportData might not exist when you first render this component.
如果可能是当您第一次呈现此组件时,您传递的 ReportData 数据可能不存在。 throw a console.log(this.props) inside the componentDidMount() lifecycle method to see exactly what this.props is the first time your component gets rendered
在 componentDidMount() 生命周期方法中抛出一个 console.log(this.props) 以准确查看 this.props 是您的组件第一次呈现的内容
试试 didMount 和 willRecieveProps?
There was an unnecessary check if data coming from the API was undefined and Redux has to wait for the needed data.如果来自 API 的数据未定义并且 Redux 必须等待所需的数据,则会进行不必要的检查。 By the time that checks out, the component is already rendered without any data.
到检出时,组件已经在没有任何数据的情况下呈现。 I rearranged the code a little bit and now it's working.
我稍微重新排列了代码,现在它可以工作了。 Thanks for pointing me in the right direction.
感谢您为我指明正确的方向。
So, the issue was on the backend in the reportsService module.因此,问题出在reportsService 模块的后端。
Here's the fix for future reference:这是供将来参考的修复程序:
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;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.