Question

我有这段代码可以很好地工作：

componentDidMount() {
    fetch('https://services2.arcgis.com/sJvSsHKKEOKRemAr/arcgis/rest/services/Bigfoot%20Locations/FeatureServer/0/query?where=1%3D1&outFields=*&outSR=4326&f=json')
    .then((response) => {
      return response.json();
    })
    .then((myJson) => {
      this.setState({data: myJson.features[0].attributes.STATE_NAME})
      console.log(this.state.data)
      
    });
   }



render() {
       return (
           <div className = ''>
               {this.state.data}
           </div>
       )
   }
}

但是，当我尝试使状态中的数据集更通用时，我可以呈现任何我想要的样子：

componentDidMount() {
    fetch('https://services2.arcgis.com/sJvSsHKKEOKRemAr/arcgis/rest/services/Bigfoot%20Locations/FeatureServer/0/query?where=1%3D1&outFields=*&outSR=4326&f=json')
    .then((response) => {
      return response.json();
    })
    .then((myJson) => {
      this.setState({data: myJson.features})
      console.log(this.state.data)
      
    });
   }



render() {
       return (
           <div className = ''>
               {this.state.data[0].attributes.STATE_NAME}
           </div>
       )
   }
}

我得到“无法读取未定义的STATE_NAME属性。唯一的变化是我尝试使用render方法而不是ComponentDidMount访问对象。这是什么问题？

Answer 1

在组件中，即使render()将在第一个渲染之前运行，也会在填充数据之前调用componentDidMount()函数。

您需要的是在反应状态下存储一个中间加载状态，以指示数据尚未到达。

class RENAME_ME extends Component {
  state = {
    loaded: false,
    data: [],
  };

  componentDidMount() {
    fetch(
      "https://services2.arcgis.com/sJvSsHKKEOKRemAr/arcgis/rest/services/Bigfoot%20Locations/FeatureServer/0/query?where=1%3D1&outFields=*&outSR=4326&f=json"
    )
      .then((response) => {
        return response.json();
      })
      .then((myJson) => {
        this.setState({
          data: myJson.features[0].attributes.STATE_NAME,
          loaded: true,
        });
        console.log(this.state.data);
      });
  }

  render() {
    // Data is still loading, display an intermediate message
    if (!this.state.loaded) {
      return <p>Loading...</p>;
    }
    return <div className="">{this.state.data}</div>;
  }
}

Answer 2

在状态出现之前，您不应该阅读以下内容：

render() {
       return (
           <div className = ''>
               {(this.state.data && this.state.data.length) ? this.state.data[0].attributes.STATE_NAME : `still loading, or maybe an error`}
           </div>
       )
   }

Answer 3

仅显示存在时的状态，因此此状态分为2部分。第一部分（this.state.data）仅在数据保存在状态中时为true，因此下一部分（this.state.data [0] .attributes.STATE_NAME）在此之后运行。

render() {
   return (
       <div className = ''>
           {this.state.data && this.state.data[0].attributes.STATE_NAME}
       </div>
   )
}
}

Answer 4

您的状态“数据”未正确初始化以处理对象

他们是这样初始化的吗？

this.state = {
     data: []

Answer 5

只要存在，您就可以渲染该值 {this.state.data[0].attributes && this.state.data[0].attributes.STATE_NAME}

反应渲染JSON嵌套对象

5 个答案: