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

Question

I am trying to create a React component called 'Proposals' that will render a tabular list of information received from the Django backend.

I am using the Reactable-Search component to form the table, but I've kept getting an error when I try to map the this.props.proposals values such as id, and proj_name to the table cells - Uncaught TypeError: Cannot read property 'cells' of undefined

Really not sure why because when I map this.props.proposals directly in the render return of a typical html table tags it is working ie rendering the backend data ok. and I've also used the Reactable-Search component with the mapping in other cases and it's worked fine.

Log output of this.props.proposals shows the correct array of objects also...:

Really appreciate if someone can nudge me in the right direction, thanks!

The Proposals component:

 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); 

The proposals reducer:

 const initialState = []; export default function proposals(state = initialState, action) { switch (action.type) { case "FETCH_PROPOSALS": return [...action.proposals]; default: return state; } } 

The proposals action

 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

The problem is that you are requesting the proposals asynchronously but the SearchTable component doesn't seem to work with empty initial proposals object. Try passing in an empty array as its rows prop and you'll get the exact same error message about undefined object.

To fix this you need to show a loading indicator instead of the SearchTable while the proposals are being fetched. Your reducer should look something like this, except you should also handle failure case:

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;
  }
}

The component should then render an activity indicator or loading status or anything other than SearchTable when isLoading is active:

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);

And the thunk action:

export const fetchProposals = () => {
  return dispatch => {
    dispatch({type: "FETCH_PROPOSALS"});
    let headers = { "Content-Type": "application/json" };
    return fetch("/api/proposals/", { headers })
      .then(res => res.json())
      .then(proposals => {
        dispatch({
          type: "FETCH_PROPOSALS_SUCCESS",
          proposals
        });
      })
      .catch(error => {
        dispatch({
          type: "FETCH_PROPOSALS_FAILURE",
          error,
        });
      });
  };
};