我正在尝试创建一个名为“ Proposals”的React组件,该组件将呈现从Django后端接收的信息的表格列表。
我正在使用Reactable-Search component来构成表格,但是当我尝试将this.props.proposals值(例如id和proj_name)映射到表格单元格时,我一直遇到错误-未捕获的TypeError:无法读取未定义的属性“单元格”
真的不确定为什么,因为当我直接在一个典型的html表标签的渲染返回中映射this.props.proposals时,它正在工作,即正常渲染后端数据。在其他情况下,我也将Reactable-Search组件与映射一起使用,效果很好。
this.props.proposals的日志输出还显示正确的对象数组...:
非常感谢有人可以向正确的方向推动我,谢谢!
“提案”组件:
import React, { Component } from "react";
import { connect } from "react-redux";
import SearchTable from "reactable-search";
import { proposals } from "../actions";
class Proposals extends Component {
componentDidMount() {
this.props.fetchProposals();
}
constructor(props) {
super(props);
this.state = {};
}
render() {
var rows = this.props.proposals.map(p => ({
selected: this.state.selectedRow === p.id,
onClick: () => {
this.setState({ selectedRow: p.id });
},
cells: {
"#": p.id,
"Project Name": p.proj_name
}
}));
return (
<SearchTable
showExportCSVBtn={true}
searchPrompt="Type to search"
rows={rows}
/>
);
}
}
const mapStateToProps = state => {
return {
proposals: state.proposals
};
};
const mapDispatchToProps = dispatch => {
return {
fetchProposals: () => {
dispatch(proposals.fetchProposals());
}
};
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(Proposals);
提案简化工具:
const initialState = [];
export default function proposals(state = initialState, action) {
switch (action.type) {
case "FETCH_PROPOSALS":
return [...action.proposals];
default:
return state;
}
}
提案操作
export const fetchProposals = () => {
return dispatch => {
let headers = { "Content-Type": "application/json" };
return fetch("/api/proposals/", { headers })
.then(res => res.json())
.then(proposals => {
return dispatch({
type: "FETCH_PROPOSALS",
proposals
});
});
};
};
答案 0 :(得分:0)
问题是您正在异步请求投标,但是library(tidyverse)
mydata <- dataset %>%
mutate(new_kmean = kmeans) %>%
group_by(kmeans) %>%
nest()
names(mydata$data) <- paste0('data',seq_along(mydata$data))
mydata$data
#$data1
# A tibble: 16 x 7
# X1 X2 X3 X4 X5 X6 new_kmean
# <dbl> <dbl> <dbl> <dbl> <dbl> <dbl> <fct>
# 1 952. 1057. 1037. 1049. 871. 1103. 3
# 2 1042. 986. 1027. 982. 836. 1121. 3
# 3 990. 996. 1121. 1134. 998. 1098. 3
#....
组件似乎不适用于空的初始投标对象。尝试传入一个空数组作为其SearchTable
属性,您将得到与未定义对象完全相同的错误消息。
要解决此问题,您需要在获取提案时显示加载指示器,而不是rows
。您的减速器应该看起来像这样,除了您还应该处理故障情况:
SearchTable
然后在isLoading处于活动状态时,组件应呈现活动指示器或加载状态或const initialState = { isLoading: false, error: null, proposals: [] };
export default function proposals(state = initialState, action) {
switch (action.type) {
case "FETCH_PROPOSALS":
return {
...state,
isLoading: true
};
case "FETCH_PROPOSALS_SUCCESS":
return {
...state,
isLoading: false,
proposals: action.proposals
};
case "FETCH_PROPOSALS_FAILURE":
return {
...state,
isLoading: false,
error: action.error,
};
default:
return state;
}
}
以外的任何值:
SearchTable
还有重击动作:
import React, { Component } from "react";
import { connect } from "react-redux";
import SearchTable from "reactable-search";
import { proposals } from "../actions";
class Proposals extends Component {
componentDidMount() {
this.props.fetchProposals();
}
constructor(props) {
super(props);
this.state = {};
}
render() {
const { proposals, error, isLoading } = this.props;
if (isLoading) {
return <div>Loading...</div>;
}
if (error) {
return <div>{error.message}</div>;
}
if (proposals.length === 0) {
return <div>No proposals</div>;
}
var rows = proposals.map(p => ({
selected: this.state.selectedRow === p.id,
onClick: () => {
this.setState({ selectedRow: p.id });
},
cells: {
"#": p.id,
"Project Name": p.proj_name
}
}));
return (
<SearchTable
showExportCSVBtn={true}
searchPrompt="Type to search"
rows={rows}
/>
);
}
}
const mapStateToProps = state => {
return {
proposals: state.proposals.proposals,
isLoading: state.proposals.isLoading,
error: state.proposals.error,
};
};
const mapDispatchToProps = dispatch => {
return {
fetchProposals: () => {
dispatch(proposals.fetchProposals());
}
};
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(Proposals);