为什么我不能在ReactJS中循环

问题描述

我知道我需要等待提取的返回。

我可以在return（）中做到这一点，但是我似乎无法在以下方面做到这一点：

  render() {
    {!this.state.heat ?(
    this.items = this.state.heat.map((item) =>
    <li>{item.location[0].coordinates[0]}</li>
    );)}

就在退货之前。

我需要在退货单中致电{items}。

我该如何解决？

export default class Heatmap extends Component {
  state = {
    loading: true,heat: null,}

  async componentDidMount(){
    const url = "http://localhost:3010/api";
    fetch(url).then(response => 
      response.json().then(data => ({
          data: data,status: response.status
      })
    ).then(res => {
      this.setState({heat: res.data})
      console.log(res.status,res.data)
    }));

  }

  render() {
    {!this.state.heat ?(
    this.items = this.state.heat.map((item) =>
    <li>{item.location[0].coordinates[0]}</li>
    );)}
      return (
      <div>
        {!this.state.heat ? (<div>Loading...</div>) : (
        <div>
          <LoadScript
        googleMapsApiKey="AIzaSyB65TiJzvcRXQ0XyDt_0B8IyX2CqYLEnQI"
      >
        <GoogleMap
          mapContainerStyle={containerStyle}
          center={center}
          zoom={10}
        >
          { /* Child components,such as markers,info windows,etc. */ }
          <></>
        </GoogleMap>
      </LoadScript>
      <ul>
      {this.items}
     </ul>
    </div>
      )}
        </div>

      
    )
  }
}

解决方法

第一件事，格式化代码，因此很容易找到我们在哪里做错了。除了格式化外，我在您的代码中看不到任何错误。我做了一些格式化，您可以尝试一下

render() {
  const { heat } = this.state
  if (!heat) return (<div>Loading...</div>)
  const items = heat.length ? heat.map(item => (
    <li>{item.location[0].coordinates[0]}</li>
  ) : []
  return (
    <div>
      <LoadScript googleMapsApiKey="AIzaSyB65TiJzvcRXQ0XyDt_0B8IyX2CqYLEnQI">
        <GoogleMap mapContainerStyle={containerStyle} center={center} zoom={10} >
          { /* Child components,such as markers,info windows,etc. */ }
        </GoogleMap>
      </LoadScript>
      {
         items.length && (
          <ul>
            { items }
          </ul>
         )
      }
    </div>
  )
}