如何延迟 React.js 中的返回以从 JSON 加载数据

Question

So far, I have tried several methods that I found on the internet, but none has worked. I tried setTimeout and setting isLoading like in code right now.

As for loading the data, I am sure that they appear correctly because after deleting loading the brand in the paragraph, the data is visible in the console (more precisely in the React 'Components' add-on)

This is what a JSON file looks like:

[
   {
    id: 0,
    brand: "Lorem0",
    model: "Lorem",
    dealer: "Lorem",
    main_image: "Lorem",
    sections: [
        {
            id: 0,
            section_type: "",
            section_title: "Lorem",
            section_text: "Lorem Lorem Lorem Lorem Lorem",
            image_left: "Lorem1.png",
            image_center: null,
            image_right: null
        }
      ]
   },
   {
    id: 1,
    brand: "Lorem0",
    model: "Lorem",
    dealer: "Lorem",
    main_image: "Lorem",
    sections: [
        {
            id: 0,
            section_type: "",
            section_title: "Lorem",
            section_text: "Lorem Lorem Lorem Lorem Lorem",
            image_left: "Lorem1.png",
            image_center: null,
            image_right: null
        }
      ]
   },    
]

And this is the code from App.js:

state = {
   isLoading: true,
}
carData = [];

componentDidMount() {
   fetch("/data.json")
     .then(response => response.json())
     .then(data => {
       this.setState({
         carData: data,
         isLoading: false
       })
     })
 }
 render() {
   return (
     <div className="App">
       {!this.state.isLoading && <p>{this.carData[1].brand}</p>}
     </div>
   );
 }

Maybe I am making a mistake that I cannot see but it seems to me that everything is fine but the error still shows up.

TypeError: Cannot read property 'brand' of undefined

Answer 1

Also you can use optional chaining

this.state.carData[1]?.brand

Answer 2

state = {
   isLoading: true,
   carData: [] // you should put the carData here.
}

componentDidMount() {
   fetch("/data.json")
     .then(response => response.json())
     .then(data => {
       this.setState({
         carData: data,
         isLoading: false
       })
     })
 }
 render() {
   return (
     <div className="App">
       {!this.state.isLoading && <p>{this.state.carData[1].brand}</p>}
     </div>
   );
 }

Answer 3

You are storing data in state but you are not trying to load data from state.

Try something like below:-

state = {
   isLoading: true,
   carData: []  // initialize carData with blank array in state 
}


componentDidMount() {
   fetch("/data.json")
     .then(response => response.json())
     .then(data => {
       this.setState({
         carData: data,
         isLoading: false
       })
     })
 }
 render() {
   return (
     <div className="App">
       {!this.state.isLoading && <p>{this.state.carData[1].brand}</p>}   // use carData with this.state.carData
     </div>
   );
 }

Answer 4

First, add carData as a property to the state object.

state = {
   carData: []  // add carData
}

Then you can remove the ìsLoading property if you insert the brand to JSX like this.

render() {
   return (
     <div className="App">
       <p>{this.state.carData[1]?.brand}</p>
     </div>
   );
 }

That ?. is called Optional Chaining . https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining