React .map不是函数 [英] React .map is not a function

问题描述

我正在尝试学习React，并且是Java的初学者.现在，我正在开发一个从Flickr的API提取数据的应用程序.问题是，当我尝试在Main.js组件中的props上使用map方法时，出现错误消息"Uncaught TypeError:this.props.photos.map不是一个函数".在此处在Stackoverflow上搜索后，我认为问题是this.props是javascript对象而不是数组.问题是我不知道如何使它成为一个数组.谁能解释我在做什么错?

I'm trying to learn React and I'm a beginner when it comes to Javascript. Right now I'm working on an app that is fetching data from Flickr's API. The problem is that when I try to use the map method on the props in the Main.js component I get an error saying "Uncaught TypeError: this.props.photos.map is not a function". After searching here on Stackoverflow I think the problem is that this.props are javascript objects and not an array. The problem is that I can't figure out how to make it an array. Can anyone explain what I'm doing wrong?

我的代码:

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?

Why is this.props.img undefined first?

console.log(this.props.img)的屏幕截图

推荐答案

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

正在发生的事情是，您的诺言中的地图功能正在为返回的每张照片重置组件的状态.因此，您的状态永远是返回的照片列表中的最后一个对象.

What is happening is that your map function in your promise is resetting the component's state for every photo that is returned. So your state will always be the last object in your list of returned photos.

这里是我所指的更简化的示例

Here is a more simplified example of what I am referring to

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

对于您要完成的工作，您希望状态是map函数的结果(因为它会从map中返回结果数组).像这样:

For what you are trying to accomplish, you want your state to be the result of the map function (since that returns an array of your results from the map). Something like this:

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

这篇关于React .map不是函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！