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

【问题标题】：How to delay return in React.js for load data from JSON如何延迟 React.js 中的返回以从 JSON 加载数据
【发布时间】：2021-05-27 07:52:59
【问题描述】：

到目前为止，我已经尝试了几种在互联网上找到的方法，但都没有奏效。我现在尝试了 setTimeout 并像在代码中一样设置 isLoading。

至于加载数据，我确信它们显示正确，因为在段落中删除加载品牌后，数据在控制台中可见（更准确地说是在 React 'Components' 插件中）

这是 JSON 文件的样子：

[
   {
    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
        }
      ]
   },    
]

这是来自 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>
   );
 }

也许我犯了一个我看不到的错误，但在我看来一切都很好，但错误仍然出现。

TypeError：无法读取未定义的属性“品牌”

【问题讨论】：

标签： javascript reactjs components undefined settimeout

【解决方案1】：

你也可以使用可选链接

this.state.carData[1]?.brand

【讨论】：

【解决方案2】：

您正在将data 存储在状态中，但您并未尝试从状态中加载数据。

试试下面的方法：-

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

【讨论】：

我了解到只有哪些更改应该处于状态。从 JSON 加载数据之类的变化是否也算在内？

【解决方案3】：

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

【讨论】：

【解决方案4】：

首先，将carData 作为属性添加到状态对象。

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

如果像这样将brand 插入到 JSX 中，则可以删除 ìsLoading 属性。

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

?. 称为可选链接。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

【讨论】：