React / Webpack / Django-未捕获的TypeError：无法读取未定义的属性“ XXX”

Question

我正在尝试创建一个名为“ 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
        });
      });
  };
};

Answer 1

问题是您正在异步请求投标，但是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);