'pic' 没有被 React 定义

Question

我正在开展一个学校项目，该项目是关于创建一个网站，显示一个带有 Flickr API 的照片库（在这种情况下为 Photo.search）我正在努力解决说“图片未定义”的错误。 我不知道在这种情况下该怎么办。 我会很高兴收到任何帮助来解锁我。 提前致谢 ！

import React, { Component } from 'react';
import './App.css';




class App extends Component {
  constructor(){
    super();
    this.state = {
      pictures: [],
      page: 1,
      total_pages: -1 
      
    };
  }

  renderPhotos(){
    
    console.log(
      this.state.pictures
    )

     return(
    
      <div>

    this.state.pictures.map((pic) => {
        
    <img className="img-thumbnail m-2" src={'https://farm'+pic.farm+'.staticflickr.com/'+pic.server+'/'+pic.id+'_'+pic.secret+'_w.jpg'} alt="bike" />
      
    })

    </div>

    )
  }

  componentDidMount(){
    alert(process.env.REACT_APP_API_KEY);
    fetch('  https://www.flickr.com/services/rest/?method=flickr.photos.search&api_key={APIKEY}_id=&tags=bikerace%2Cboulderbiketour&per_page=42&page=1&format=json&nojsoncallback=1')
    .then(function(response){
      return response.json();
    })
    .then(function(j){

      alert(JSON.stringify(j));
      if (this.state.total_pages == -1){
        this.setState({total_pages: j.photos.pages,pictures: j.photos.photo})
      }
      else{ 
        this.setState({pictures: j.photos.photo})
      }

      
     
    })
  }

  NextPage = () => {
   var CurrentPage = this.state.page;
   CurrentPage++;
   if (CurrentPage <= this.state.total_pages){
    this.setState({page:CurrentPage});
   }
   

  }

 
  PreviousPage = () => {
    var CurrentPage = this.state.page;
    CurrentPage--; 
    if (CurrentPage >= 1){
      this.setState({page:CurrentPage});
     }

    
 
   }
 

  render() {
    return (
      <div className="App">
        <header className="App-header">
        
          <h1 className="App-title">Welcome to React</h1>
          
        </header>
         
        <p>
          <div>
           Page {this.state.page}
          </div>
          
            <div className="gallery p-5">
          
          {this.renderPhotos()}

          </div>

          <div>

          <button onClick={this.PreviousPage}>Previous</button>
          <button onClick={this.NextPage}>Next</button>
          </div>
          

        </p>

        
      </div>
    );
  }
}

export default App;

Answer 1

老实说，这里没有很多关于 go 的信息，但只是通过查看代码，我看到了我经常遇到的一些事情。 React 在渲染项目时很有趣，因为它会渲染，然后更新 state，然后再次渲染。 这与如果任何未定义的内容 React 只会崩溃的事实相混合，这意味着它将在第一次渲染之前崩溃，然后再进行第二次渲染。 如果您尝试将其注销，您将在控制台日志中看到这一点。 反应组件中通常有多个渲染，如果任何渲染中未定义任何内容。 React 只会崩溃。

在您的情况下，React 会在此之前检查 map。state.pictures 已定义，因此它在进入第二个渲染之前崩溃。 这是您解决此问题的方法。

1. Console.log(this.state)
2. 如果可行，那么 console.log(this.state.pictures)
3. 继续下线，直到它崩溃。
4. 在崩溃的时候做一个心理记录。 假设它在“this.state.pictures”处崩溃。 然后，您将要在下面编写以下代码

this.state && this.state.pictures.map(pic)

这需要整本教科书来解释为什么会这样，但确实如此。