TypeError: Cannot read properties of undefined (reading 'map') in React-Views-CodePudding

I am stuck on this error and I cannot figure out what I am doing wrong, from what I have figured out it looks like my list of objects is empty but that doesn't make any sense since I am able to log it to the console. I think the problem might be something with how I am using setState. I have been looking all over the internet and can't find the solution.

const Head = require ('../components/Head.jsx');
const Nav = require ('../components/Nav.jsx');
const Footer = require ('../components/Footer.jsx');
const getPipeLine = require('../../service/Contructor.js');

let display = new getPipeLine;

class ActiveLoans extends React.Component {
    constructor(props) {
       super(props)
        this.state = {
          data: display
        }; 
}; 

async componentDidMount() {
    const activeDisplay = async () => 
     await this.state.data.then((results) => {
        console.log('Data Fetched')
        !!!this.setState({results});               
    });
    activeDisplay()
};

render(){
    return(
        <React.Fragment>
                <Head />
                <Nav />
                {this.state.results.map((result) => (
                    <div key={result.a.LoanNumber}>
                        <thead>
                            <tr>
                                <th>Loan Number</th>
                                <th>Loan Status</th>
                                <th>Loan Type</th>
                                <th>Submit Date</th>
                                <th>Last Review</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>{result.a.LoanNumber}</td>
                                <td>{result.a.LoanStatus}</td>
                                <td>{result.a.LoanType}</td>
                                <td>{result.a.SubmitDate}</td>
                                <td>{result.a.LastReview}</td>
                            </tr>                
                        </tbody>
                    </div>
                ))}

                
                <Footer />    
        </React.Fragment>
)}}

module.exports = ActiveLoans;

I am able to print the results of setState like this and it logs it to the console just fine so I dont understand why I'm not able to display the results using map

    const activeDisplay = async () => 
     await this.state.data.then((results) => {
        console.log('Data Fetched')
        !!!this.setState({results}, 
            (async () => {
        let obj = await results;
        console.log('Done:', obj);
    })());               
    });
    activeDisplay()
};

I have tried several different ways to display the results using map but nothing has worked so far. When I use this.state.results? nothing shows up so I'm thinking that I'm not returning it right.

this is the first few results of my list of objects,

    '0': {
      LoanNumber: 12345252,
      LoanStatus: 'Initial',        
      LoanType: 'FHA',
      SubmitDate: '1/14/2022',      
      LastReview: null
    },
    '1': {
      LoanNumber: 12345626,
      LoanStatus: 'Initial',        
      LoanType: 'VA',
      SubmitDate: '1/14/2022',      
      LastReview: null
    },
    '2': {
      LoanNumber: 12345670,
      LoanStatus: 'Initial',        
      LoanType: 'Conventional',     
      SubmitDate: '1/14/2022',      
      LastReview: null
    },

I'm using express-react-views to render on the server side

I have two list of objects the first one is the 'a' the second one is the 'i' both of these are deconstructed.

CodePudding user response：

You are only setting results attribute to state when the API call completes successfully. React will not wait for the API call to complete for the initial render. During the initial render this.state.results value will be undefined. You should always initialize all the state attributes in the constructor. There are two reasons for this:

Initial render call will use default state attribute values, so there won't be errors like this
By looking at the constructor, you will see what are the state attributes this component has. Improves readability a lot.

This issue can be resolved by properly initializing results attribute while specifying initial state.

this.state = {
    data: display,
    results: []
};

CodePudding user response：

I think you should do a null/undefined check for this.state.data and if it exists then only go ahead with map.

Array.isArray(this.state.data) && this.state.data.map(...)

Also, I have not worked with SSR much, if you can write this as functional component with hooks, and await for this.state.data in render method.

You also have a typo here const getPipeLine = require('../../service/Contructor.js'); Contructor => Constructor