TypeError: Cannot read properties of null , don't catch data- React-CodePudding

I have a problem building my app. It is my first project in React. And a have and error.

Error

Edit -> 
First error-> 

Uncaught TypeError: Cannot read properties of null (reading '0')
    at Search (bundle.js:511:19)
    at renderWithHooks (bundle.js:22935:22)
    at mountIndeterminateComponent (bundle.js:25697:17)
    at beginWork (bundle.js:26896:20)
    at HTMLUnknownElement.callCallback (bundle.js:11885:18)
    at Object.invokeGuardedCallbackDev (bundle.js:11934:20)
    at invokeGuardedCallback (bundle.js:11994:35)
    at beginWork$1 (bundle.js:31736:11)
    at performUnitOfWork (bundle.js:30572:16)
    at workLoopSync (bundle.js:30509:9)



// this problem I solve 
b.AssertionError
actual: null
expected: true
generatedMessage: false
message: "Invalid pattern"
name: "AssertionError"
operator: "=="
stack: "AssertionError: Invalid pattern\n    at E (chrome-extension://liecbddmkiiihnedobmlmillhodjkdmb/js/companion-bubble.js:1409:4073)\n    at g (chrome-extension://liecbddmkiiihnedobmlmillhodjkdmb/js/companion-bubble.js:1409:4149)\n    at C (chrome-extension://liecbddmkiiihnedobmlmillhodjkdmb/js/companion-bubble.js:1409:4568)\n    at chrome-extension://liecbddmkiiihnedobmlmillhodjkdmb/js/companion-bubble.js:1416:5843\n    at Array.find (<anonymous>)\n    at chrome-extension://liecbddmkiiihnedobmlmillhodjkdmb/js/companion-bubble.js:1416:5831\n    at Generator.next (<anonymous>)\n    at ae (chrome-extension://liecbddmkiiihnedobmlmillhodjkdmb/js/companion-bubble.js:1416:5263)"
[[Prototype]]: Error

And app doesn't catch data. Before it worked. Now it works only if first a comment Search component, after that app works and second I recommented component and app work fine. But when I started app -> npm start, I have the same problem.

Thank you for your help

import './App.css';
import { React, useState, useEffect } from "react";
import axios from "axios";
import Search from './Component/Search'
function App() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
useEffect(() => {
    const getData = async () => {
      try {
        const response = await axios.get(
          ` https://api.hatchways.io/assessment/students`
        );
        let responseDataArray = response.data.students;
        // console.log(responseDataArray);
        setData(responseDataArray);
        setError(null);
      } catch (err) {
        setError(err.message);
        setData(null);
      } finally {
        setLoading(false);
      }
    };
    getData();
  }, []);
return (
    <div className="main">
      {/* <h1></h1> */}
      <div className="search">
      </div>
      {loading && <div>A moment please...</div>}
      {error && (
        <div>{`There is a problem fetching the post data - ${error}`}</div>
      )}
      <h1> hi there</h1>
      <Search details={data} />
    </div>
  );
}

export default App;

CodePudding user response：

The error is thrown in the Search component and you haven't postet its source, so this is just a guess, but could it be that your Search component accesses detail/data without checking if its populated?

If that's the case you can fix your Search component or only use it after data is loaded.

return (
    <div className="main">
      {/* <h1></h1> */}
      <div className="search">
      </div>
      {loading && <div>A moment please...</div>}
      {error && (
        <div>{`There is a problem fetching the post data - ${error}`}</div>
      )}
      <h1> hi there</h1>
      {loading ? null : (
      <Search details={data} />
      )}
    </div>
  );
}