React .mapは関数ではありません

Question

私はReactを学ぼうとしています。私はJavascriptに関しては初心者です。今、私はFlickrのAPIからデータを取得しているアプリケーションに取り組んでいます。問題は、Main.jsコンポーネントのプロップでマップメソッドを使用しようとすると、「Uncaught TypeError：this.props.photos.mapが関数ではない」というエラーが表示されることです。 Stackoverflowでここで検索した後、私は問題がthis.propsが配列ではなくjavascriptオブジェクトであると思います。問題は、それを配列にする方法を理解できないことです。誰も私が間違っていることを説明することはできますか？

マイコード：

class App extends Component { 

    constructor() { 
    super(); 
    this.state = { 

    } 
} 

componentDidMount() { 

let apiKey = 'xxxxxxxxxxxxxxxxxx'; 
let searchKeyword = 'nature'; 
let url = `https://api.flickr.com/services/ 
      rest/?api_key=${apiKey}&method=flickr.photos. 
      search&format=json&nojsoncallback=1&&per_page=50 
      &page=1&text=${searchKeyword}`; 

fetch(url) 
    .then(response => response.json()) 
    .then(data => data.photos.photo.map((x) => { 

    this.setState({ 
     farm: x.farm, 
     id: x.id, 
     secret: x.secret, 
     server: x.server}) 
    // console.log(this.state) 
    })) 
} 

    render() { 
     return (
     <div className="App"> 
      <Header /> 
      <Main img={this.state.photos} /> 
      <Navigation /> 
     </div> 
    ); 
    } 
    } 

    export default class Main extends Component { 

    render() { 

    return(
     <main className="main"> 
     {console.log(this.props.photos)} 
     </main> 
    ) 
    } 
} 

編集： なぜthis.props.img未定義の最初のですか？

Screen shot from console.log(this.props.img)

Answer 1

fetch(url) 
    .then(response => response.json()) 
    .then(data => data.photos.photo.map((x) => { 

    this.setState({ 
     farm: x.farm, 
     id: x.id, 
     secret: x.secret, 
     server: x.server}) 
    })) 

何が起こっているあなたの約束であなたのマップ機能が返されるすべての写真をコンポーネントの状態をリセットしていることです。あなたの状態は返された写真のリストの中の最後のオブジェクトになります。

ここで私はあなたが何をしたいのか

const testArray = [1,2,3,4]; 

let currentState; 

testArray.map((value) => currentState = value) 

console.log(currentState); 

を参照しています何のより単純化した例は、あなたが達成しようとしているもの、あなたがあなたの状態を希望の場合、この

const testArray = [1,2,3,4]; 

let currentState; 

//Notice we are using the return value of the map function itself. 
currentState = testArray.map((value) => value) 

console.log(currentState); 

ですマップ関数の結果になります（マップから結果の配列を返します）。このようなもの：

fetch(url) 
    .then(response => response.json()) 
    .then(data => 
    this.setState({ 
     photos: 
     data.photos.photo.map((x) => ({ 
      farm: x.farm, 
      id: x.id, 
      secret: x.secret, 
      server: x.server 
     })) 
    }) 
    )